<template>
  <!-- 抖音-自动发布 -->
  <div class="box" style="padding: 14px 14px 0">
      <!-- loading 遮罩 -->
  <loadingMask ref="loadingMaskRef" text="上传中..." :zIndex="1001" :loading="globLoading"></loadingMask>
    <!-- 头部返回按钮样式 -->
    <div class="router-name">
      <a-button ghost class="back" @click="isBack">返回</a-button>
      <span v-if="is_Douyin_type !== 'qr_code'"> {{ getTitle }}-自动发布</span>
      <span v-if="is_Douyin_type == 'qr_code'"> {{ getTitle }}-扫码发布</span>
    </div>
    <!-- 主体部分 -->

    <div class="content">
      <!-- 左侧区域 -->
      <div class="context_lf">
        <a-form
          layout="vertical"
          style="display: flex; flex-direction: column; height: 100%"
        >
          <div class="lf_top">
            <!-- 选择项目 -->
            <a-form-item
              label="发布任务名称"
              v-bind="validateInfos.name"
              :colon="false"
            >
              <a-input
                v-model:value="modelRef.name"
                show-count
                placeholder="请输入发布任务名称"
                :maxlength="40"
              ></a-input>
            </a-form-item>
            <!-- 添加成片 -->
            <a-form-item v-bind="validateInfos.intoPieces" :colon="false">
              <template #label>
                <span>
                  成片 （已选择）
                  <strong>{{ ` ${filmVideoList.length} ` }}</strong
                  >个成片
                </span>
                <span
                  v-if="PlatFormValue == 'weixinshipinhao'"
                  style="margin-left: 20px; color: #f50"
                >
                  <InfoCircleOutlined />
                  建议分辨率720p及以上，码率10Mbps以内，格式为MP4/H.264格式。注意不支持MP4/H.265格式
                </span>
              </template>
              <!-- 成片列表 -->
              <div class="movieslist">
                <!-- 添加成片 -->
                <div class="movies_add" >
                  <div class="upload_box" @click="getMaterial">
                    <div class="upload_desc">
                      <div style="font-size: 24px; font-weight: 600">+</div>
                      <div>添加素材</div>
                    </div>
                    <!-- <div class="upload_img_mask">
                      <span class="upload_img-local" @click="intoPiecesClick"><DownloadOutlined />导入成片</span>
                      <span class="line"></span>
                      <Upload ref="UploadRef" 
                      @loadingUpload="loadingUpload"
                      @getMediaList="getMediaList"
                      >
                        <template #content>
                          <span class="upload_img-origin"><UploadOutlined />上传成片</span>
                        </template>
                      </Upload>
                    </div> -->
                  </div>
                </div>
                <!-- 单个成片 -->
                <!-- filmVideoList -->
                <div
                  class="movies_item"
                  v-for="(item, index) in filmVideoList"
                  :key="item.id"
                >
                  <img
                    v-if="item?.image_ary"
                    :src="item?.image_ary[0]"
                    alt=""
                  />
                  <img
                    v-if="item.cover_url && item.cover_url !== ''"
                    :src="item.cover_url"
                    alt=""
                    style="width: 100px; height: 100px"
                  />

                  <div
                    v-if="!item.cover_url && !item?.image_ary"
                    style="width: 100px; height: 100px; overflow: hidden"
                  >
                    <img
                      :src="default_corver"
                      alt=""
                      style="
                        width: 100px;
                        height: 100px;
                        object-fit: cover;
                        transform: scale(1.5);
                        transform-origin: center;
                      "
                    />
                  </div>

                  <!-- 持续时长 -->
                  <span class="movies_duration">{{
                    durationTime(item.material_duration)
                  }}</span>

                  <div class="movies_itemmask" @click.stop="previewImg(item)">
                    <cu-icon
                      class="play_icon"
                      type="icon-shipin"
                      style="font-size: 24px"
                    />
                    <!-- 关闭按钮 -->
                    <span
                      class="movies_closebtn"
                      @click.stop="deleteFilmVideo(index)"
                      ><delete-outlined
                    /></span>
                  </div>
                </div>
              </div>
            </a-form-item>
          </div>
          <div
            class="lf_bottom"
            v-if="!(is_Douyin_type == 'qr_code' && PlatFormValue == 'douyin')"
          >
            <!-- 选择账号 -->
            <a-form-item v-bind="validateInfos.releaseTime" :colon="false">
              <template #label>
                <div>
                  选择账号
                  <span style="margin-left: 5px">
                    （已选择 {{ accountList?.length || 0 }} 个）
                  </span>

                  <span
                    style="color: #666; font-size: 12px"
                    v-if="PlatFormValue == 'douyin'"
                    >如果账号已绑定POI，发布内容时将会自动携带关联信息，不会被随机选择。</span
                  >
                </div>
              </template>
              <div class="set_all" v-if="PlatFormValue == 'bilibili'">
                <a-button size="small" type="primary" @click="setAllParlabel"
                  >统一设置分区和标签</a-button
                >
              </div>
              <!-- 账号列表 -->
              <div class="account_list">
                <div class="account_add" @click.stop="chooseAccountClick">
                  <plus-outlined />
                  <span>添加账号</span>
                </div>
                <div
                  class="account_item"
                  v-for="(item, index) in accountList"
                  :key="item.id"
                >
                  <div
                    class="status_tag"
                    :style="{
                      color: item?.status_txt == '离线' ? 'red' : '#389e0d',
                    }"
                  >
                    {{ item?.status_txt }}
                  </div>
                  <div
                    class="account_item_info"
                    style="display: flex; align-items: center"
                  >
                    <div class="avatar">
                      <a-tooltip
                        v-if="
                          item?.user_expand_info?.account_type == 'org_main'
                        "
                      >
                        <template #title>{{
                          item?.user_expand_info?.account_type_txt
                        }}</template>
                        <img :src="item.avatar" alt="" class="avatar" />
                      </a-tooltip>
                      <a-tooltip
                        v-else-if="
                          item?.user_expand_info?.account_type == 'org_sub'
                        "
                      >
                        <template #title>
                          <div>
                            {{ item?.user_expand_info?.account_type_txt }}
                          </div>
                          <div>
                            对应主账号名称：{{
                              item?.user_expand_info?.parent_account?.nickname
                            }}
                          </div>
                        </template>
                        <img :src="item.avatar" alt="" class="avatar" />
                      </a-tooltip>
                      <img :src="item.avatar" alt="" class="avatar" v-else />
                    </div>
                    <div class="user_info">
                      <span class="nickName"
                        >{{ item?.nickname?.slice(0, 5) }}
                        <a-popover v-if="item?.nickname?.trim()?.length > 5">
                          <template #content>
                            <div
                              style="
                                max-width: 200px;
                                overflow-y: auto;
                                max-height: 400px;
                              "
                            >
                              {{ item?.nickname }}
                            </div>
                          </template>
                          <ellipsis-outlined
                            v-if="item?.nickname?.trim()?.length > 5"
                          />
                          <!-- <span v-if="item?.nickname?.trim()?.length > 5" style="cursor: pointer;">...</span> -->
                        </a-popover></span
                      >
                      <span class="publish_num"
                        >发布次数：{{ item.release_success_count || 0 }}</span
                      >
                    </div>
                  </div>

                  <div class="action_btn">
                    <span
                      v-if="
                        item.poi && item.poi.poi_id && PlatFormValue == 'douyin'
                      "
                      @click="checkFn(item)"
                      class="blueFN"
                      style="
                        width: 68%;
                        white-space: nowrap;
                        cursor: pointer;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        box-sizing: border-box;
                        font-size: 12px;
                      "
                    >
                      POI: {{ item?.poi?.poi_id }}</span
                    >

                    <span
                      v-if="!item.poi && PlatFormValue == 'douyin'"
                      @click="checkFn(item)"
                      class="blueFN"
                      style="
                        width: 68%;
                        white-space: nowrap;
                        cursor: pointer;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        box-sizing: border-box;
                        font-size: 12px;
                      "
                    >
                      绑定POI</span
                    >

                    <template v-if="PlatFormValue == 'douyin'">
                      <span
                        @click="mountApplet(item)"
                        class="blueFN"
                        style="
                          width: 68%;
                          white-space: nowrap;
                          cursor: pointer;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          box-sizing: border-box;
                          font-size: 12px;
                        "
                      >
                      &nbsp;|&nbsp;
                      <a-tooltip>
                      <template #title>如果账号已绑定小程序, 发布时将自动关联, 不会被随机</template>
                      <QuestionCircleOutlined/>  
                      </a-tooltip>

                      <!-- <template> -->
                      <span v-if="!item?.bind_info?.anchor_mini?.length">
                        挂载小程序
                      </span>
                      <span v-else>
                      {{ item?.bind_info?.anchor_mini?.[0]?.name }}
                      </span>
                      <!-- </template> -->

                      </span>
                      </template>

                    <span
                      class="set_btn"
                      style="color: orange"
                      v-if="
                        item?.archive_type?.id && PlatFormValue == 'bilibili'
                      "
                      @click="SetParlabelFn(item)"
                      >编辑分区和标签</span
                    >
                    <span
                      class="set_btn"
                      v-if="
                        !item?.archive_type?.id && PlatFormValue == 'bilibili'
                      "
                      @click="SetParlabelFn(item)"
                      >设置分区和标签{{ item?.archive_type?.id }}</span
                    >
                    <a-popover>
                      <template #content>
                        <div>
                          当前视频号挂载发布的商品次数，今日已达上限，无法使用。<span
                            style="cursor: pointer; color: #3261fb"
                            @click="checkRule()"
                            >查看挂载条件</span
                          >
                        </div>
                      </template>
                      <span
                        style="
                          font-size: 10px;
                          margin-right: 5px;
                          color: #a4a4a4;
                          font-weight: 600;
                          cursor: not-allowed;
                        "
                        v-if="
                          PlatFormValue == 'weixinshipinhao' && item.reachLimit
                        "
                        >添加小黄车</span
                      >
                    </a-popover>
                    <a-spin
                      style="margin-right: 5px"
                      size="small"
                      v-if="
                        PlatFormValue == 'weixinshipinhao' &&
                        item.weixinshipinhao_loading
                      "
                    />
                    <span
                      class="set_btn"
                      v-if="
                        PlatFormValue == 'weixinshipinhao' &&
                        item.enablePostWithProduct &&
                        only_shipingcar.length == 0 &&
                        !item.reachLimit
                      "
                      @click="SetshipinghaocarFn(item)"
                      disabled
                      >添加小黄车</span
                    >
                    <a-popover>
                      <template #content>
                        <div>
                          当前视频号没有资质，无法使用。<span
                            style="cursor: pointer; color: #3261fb"
                            @click="goguazai"
                            >查看挂载条件</span
                          >
                        </div>
                      </template>
                      <span
                        style="
                          font-size: 10px;
                          margin-right: 5px;
                          color: #a4a4a4;
                          font-weight: 600;
                          cursor: not-allowed;
                        "
                        class="set_btn_dis"
                        v-if="
                          PlatFormValue == 'weixinshipinhao' &&
                          !item.enablePostWithProduct &&
                          only_shipingcar.length == 0 &&
                          !item.reachLimit &&
                          item.is_success
                        "
                        >添加小黄车</span
                      >
                    </a-popover>

                    <span
                      class="set_btn"
                      v-if="
                        PlatFormValue == 'weixinshipinhao' &&
                        only_shipingcar.length > 0 &&
                        !item.reachLimit
                      "
                      @click="SetshipinghaocarFn(item)"
                      >已挂载商品</span
                    >

                    <delete-outlined
                      class="del_btn"
                      @click.stop="closeClick(index)"
                    />
                  </div>
                </div>
              </div>
            </a-form-item>
          </div>
        </a-form>
      </div>

      <!-- 右侧区域 -->
      <div class="context_rg">
        <!-- 查看标题 -->
        <div class="title_tip">
          <div style="display: flex; align-items: center">
            <span style="margin-right: 8px"
              >成片标题
              <span
                style="
                  height: 100%;
                  border-radius: 5px;
                  margin-right: 3px;
                  background-color: var(--ss-primary-color);
                  color: #fff;
                  padding: 0 5px;
                  margin-left: 5px;
                "
                >{{ titleList.length }}</span
              >
            </span>

            <span
              v-if="AILoading"
              style="font-size: 14px; flex: 1; margin: 0 15px"
              >预计生成：<span style="font-weight: 600">{{
                AIExpanSionTotal
              }}</span
              >，已生成：<span style="font-weight: 600">{{
                AIExpanSionCount
              }}</span></span
            >
            <a-progress
              size="small"
              v-if="AILoading"
              :percent="AIExpansionPercent"
              style="width: 140px"
            />
          </div>
          <a-button class="ai-batch-writing-titles" type="default" size="small" @click="AIBatchWritingTitles">AI批量写标题</a-button>
          <!-- <a-popover v-if="AILoading">
            <template #content> AI扩写生产中，请耐心等待 </template>
            <a-button
              disabled
              class="ai_disabled"
              size="small"
              style="display: flex !important; align-items: center"
            >
              <template #icon>
                <cu-icon
                  type="icon-AIxiezuozhushou"
                  style="color: #2580fd; font-size: 18px; margin-top: 3px"
                ></cu-icon>
              </template>
              AI扩写
            </a-button>
          </a-popover>
          <a-button
            v-else
            size="small"
            @click="addAIExpansion"
            style="display: flex; align-items: center"
          >
            <template #icon>
              <cu-icon
                type="icon-AIxiezuozhushou"
                style="color: #2580fd; font-size: 18px; margin-top: 3px"
              ></cu-icon>
            </template>
            AI扩写
          </a-button> -->
        </div>
        <!-- 标题展示列表 -->
        <div
          class="title_list_more"
          style="margin-top: 8px"
          v-if="titleList.length > 0"
        >
          <div
            class="title-item"
            v-for="(item, index) in titleList"
            :key="index"
          >
            <div class="item-text" v-if="item.text">
              <span style="font-weight: 600">标题：</span>{{ item.text }}
            </div>
            <div class="item-caption">
              <span class="caption">{{ item?.caption }}</span>
              <a-space class="operation"
                ><edit-outlined
                  class="edit_btn"
                  @click="addTitleHandle('view')" /><delete-outlined
                  class="delete_btn"
                  v-if="titleList.length > 1"
                  @click="deleteTitle(index)"
              /></a-space>
            </div>
            <div
              class="hashtag_name"
              v-if="
                PlatFormValue != 'kuaishou' && item?.hashtag_name.length > 0
              "
            >
              <a-tag
                v-for="(name, i) in item.hashtag_name"
                :key="i"
                style="background: #d5e3f4; font-size: 10px"
              >
                <template v-if="PlatFormValue != 'xiaohongshu'">
                  #{{ name }}
                </template>

                <template v-else> #{{ name.value }} </template>
              </a-tag>
            </div>
          </div>
        </div>
        <!-- 添加成片标题按钮 -->
        <a-button
          :disabled="AILoading"
          style="margin: 10px 0"
          block
          type="dashed"
          @click="addTitleHandle('add')"
          ><plus-outlined />添加成片标题</a-button
        >
        <!-- 挂载内容提示标题 -->
        <div
          class="title_tip"
          v-if="
            PlatFormValue !== 'weixinshipinhao' && PlatFormValue !== 'bilibili' && PlatFormValue!== 'tiktok'
          "
        >
          <span
            >挂载内容
            <a-tooltip>
              <template #title>
                  <div v-if="PlatFormValue=='douyin'">
                    <div>
                      关于团购挂载如果发布的账号没有挂团权限则不会挂载。<br />
                      关于 POI 挂载如果发布的账号不支持带货模式则自动降级为打卡模式。
                    </div>
                  </div>
                  <div v-else>
                    {{ contentTip }}
                  </div>
                </template>
              <question-circle-outlined style="margin-left: 3px" />
            </a-tooltip>
            <span v-if="is_douyin_tuangou && modelRef.anchor_type == 4" style="color: red; font-size: 13px; margin-left: 5px;">请确保所选的账号都支持挂载团购，否则发布视频的时候可能会失败且对应的账号也会掉线</span>

            <span
              v-if="modelRef.anchor_type == 2"
              style="color: #2878ff; cursor: pointer; margin-left: 5px"
              @click.stop="requirementsClick"
            >
              查看挂载要求
            </span>
          </span>
          <!-- 挂载内容-位置数量 -->
          <span
            @click="addPoiHandle"
            v-if="modelRef.anchor_type == 1 && poiList.length > 0"
            ><span
              style="
                height: 100%;
                border-radius: 5px;
                margin-right: 3px;
                background-color: var(--ss-primary-color);
                color: #fff;
                padding: 0 5px;
              "
              >{{ poiList.length }}</span
            >查看位置<right-outlined style="font-size: 12px"
          /></span>
          <!-- 挂载内容-小程序数量 -->
          <span
            @click="addMobilHandle"
            v-if="modelRef.anchor_type == 2 && mobileList.length > 0"
            ><span
              style="
                height: 100%;
                border-radius: 5px;
                margin-right: 3px;
                background-color: var(--ss-primary-color);
                color: #fff;
                padding: 0 5px;
              "
              >{{ mobileList.length }}</span
            >查看小程序<right-outlined style="font-size: 12px"
          /></span>
          <!-- 挂载内容-小黄车数量 -->
          <span
            @click="viewSmallCart"
            v-if="modelRef.anchor_type == 3 && shop_cart.length > 0"
            ><span
              style="
                height: 100%;
                border-radius: 5px;
                margin-right: 3px;
                background-color: var(--ss-primary-color);
                color: #fff;
                padding: 0 5px;
              "
              >{{ hasAddCartCountCount }}</span
            >查看小黄车挂载<right-outlined style="font-size: 12px"
          /></span>
        </div>
        <a-form layout="vertical" style="margin-top: 10px">
          <!-- 挂载内容左侧选择框 -->
          <a-form-item
            :colon="false"
            v-bind="validateInfos.anchor_type"
            v-if="
              PlatFormValue !== 'weixinshipinhao' &&
              PlatFormValue !== 'bilibili'
            "
            style="width: 100%; margin-bottom: 10px !important"
          >
            <a-select
              v-model:value="modelRef.anchor_type"
              :placeholder="
                PlatFormValue == 'xiaohongshu' && !accountList?.length
                  ? '请先选择账号'
                  : '请选择挂载内容'
              "
              style="width: 100%"
              :style="{
                border: borderErrStyle ? '2px solid red !important' : '',
              }"
              @change="antchor_typeChange"
            >
              <a-select-option
                v-for="item in anchorTypeListComputed"
                :disabled="item.disabled"
                :value="item.value"
              >
                <a-tooltip placement="top">
                  <template #title>
                    <span>{{ item?.tip || "" }}</span>
                  </template>
                  <template v-if="item.disabled">
                    <div>{{ item.label }}</div>
                  </template>
                </a-tooltip>
                <span v-if="!item.disabled">{{ item.label }}</span>
              </a-select-option>
            </a-select>
          </a-form-item>
          <!-- {{ modelRef.anchor_type + 'modelRef.anchor_type' }} -->
          <div
            v-if="is_douyin_tuangou && modelRef.anchor_type == 4"
            style="
              width: 100%;
              display: flex;
              justify-content: space-between;
              margin: 10px 0;
            "
          >
              <!--  @popupScroll="handleScroll"  -->

              <a-spin :spinning="value_taungou_loading" style="width: 100%;">
                <a-select
                  v-model:value="value_taungou"
                  mode="multiple"
                  placeholder="请选择团购商品"
                  style="width: 100%"
                  option-label-prop="label"
                  show-search
                  @change="handleChange"
                  :loading="value_taungou_loading"
                  :filter-option="false"
                  :dropdown-visible="dropdownVisible"
                  @search="debouncednew_handleSearch"
                  @focus="focusFn"
                  @dropdownVisibleChange="dropdownVisibleChange"
                
                >
                  <a-select-option
                    v-for="(item, idnex) in douyintaunList"
                    :key="index"
                    :value="item.spu_id"
                    :label="item.spu_name"
                  >
                    <div class="taungou_box">
                      <div class="left">
                        <img
                          class="left_img"
                          :src="item?.image_url?.url_list[0]"
                          alt=""
                        />
                      </div>
                      <div class="right">
                        <div class="one">{{ item.spu_name }}</div>
                        <div class="two">{{ item?.poi?.poi_name }}</div>
                        <div class="three">
                          <div class="three_left">
                            ￥{{ item.actual_price / 100 }}
                          </div>
                          <div class="three_right">
                            赚￥{{ item?.display_cps?.earn_price / 100 }} 佣金率
                            {{ item?.display_cps?.take_rate / 100 }}%
                          </div>
                        </div>
                      </div>
                    </div>
                  </a-select-option>
    
                  <template #dropdownRender="{ menuNode: menu }">
                 <div>
                   <component :is="menu" />
                   <a-divider v-if="showLoadMoreButton" style="margin: 4px 0" />
                   <div
                     @mousedown="e => e.preventDefault()"
                     v-if="showLoadMoreButton && !value_taungou_loading"
                     style="padding: 4px 8px; cursor: pointer; text-align: center; color: #2260f2;"
                     @click.stop="loadMore"
                   >
                     点击加载更多
                   </div>
    
                   <div v-if="value_taungou_loading" style="display: flex; align-items: center; justify-content: center;">
                   <a-spin />
                  </div>
              
                 </div>
               </template>
                </a-select>
              </a-spin>
          </div>

          <div
            v-if="is_kuaishou_goods"
            style="
              width: 100%;
              display: flex;
              justify-content: space-between;
              margin: 10px 0;
            "
          >
            <div class="left">
              添加商品
              <a-popover
                placement="bottom"
                :overlay-style="{
                  width: '400px',
                  whiteSpace: 'normal',
                  wordBreak: 'break-all',
                }"
              >
                <template #content>
                  <div style="margin-bottom: 5px" class="title_box">
                    获取快手商品ID：
                    <div style="margin-bottom: 5px">
                      1、登录【
                      <span
                        style="color: #3261fb; cursor: pointer"
                        @click="open_newurl"
                      >
                        快手电商开放平台</span
                      >】，进入商品管理模块。
                    </div>
                    <div style="margin-bottom: 5px">
                      2、在商品列表中找到您想要获取商品ID的商品。
                    </div>
                    <div style="margin-bottom: 5px">
                      3、点击商品详情页面，通常在商品列表或搜索结果中，您可以看到商品的详细信息
                      页面。
                    </div>
                    <div style="margin-bottom: 5px">
                      4、在商品详情页面，您会看到一个链接或按钮，点击后可以复制商品链接。
                    </div>
                    <div style="margin-bottom: 5px">
                      5、商品链接通常会以`https://shop,kuaishou.com/detail开头，后面跟着商品ID。
                      例如:https://shop.kuaishou.com/detail?skuld=123456~。在这里，`123456`即
                      为商品ID。
                    </div>
                  </div>
                </template>
                <question-circle-outlined style="margin-left: 3px" />
              </a-popover>
            </div>
            <div class="right">添加多个商品ID, 随机挂载一个(仅支持挂载自建商品，不支持其他类型商品挂载。)</div>
          </div>
          <div
            v-if="is_kuaishou_goods"
            class="kuaishou_good"
            style="
              width: 100%;
              min-height: 100px;
              border: 1px solid #d4d4d4;
              margin: 10px 0;
              padding-top: 5px;
            "
          >
            <!-- 添加商品 -->
            <a-select
              dropdownClassName="kuaishou_goods"
              overlayClassName="kuaishou_good"
              v-model:value="kuaishou_goods"
              mode="tags"
              :maxTagTextLength="100"
              :maxTagCount="500"
              :token-separators="[',']"
              @change="tagChange($event)"
              :bordered="false"
              placeholder="输入商品ID按回车键选中"
              style="width: 100%"
              :options="kuaishou_goodList"
              optionLabelProp="label"
            ></a-select>
          </div>

          <!-- 添加位置按钮 -->
          <a-button
            block
            v-if="
              modelRef.anchor_type == 1 &&
              (PlatFormValue == 'douyin' || PlatFormValue == 'xiaohongshu')
            "
            type="dashed"
            style="margin-bottom: 10px"
            @click="addPoiHandle"
            ><plus-outlined />添加位置</a-button
          >

          <!-- 添加小程序按钮 -->
          <a-button
            block
            type="dashed"
            v-if="modelRef.anchor_type == 2"
            style="margin-bottom: 10px"
            @click="addMobilHandle"
            ><plus-outlined />添加小程序</a-button
          >
          <a-button
            block
            type="dashed"
            v-if="modelRef.anchor_type == 3"
            style="margin-bottom: 10px"
            @click="addSmallCartHandle"
            :loading="addYellowCartLoading"
            ><plus-outlined />添加小黄车</a-button
          >

          <a-form-item
            label="允许他人保存视频"
            v-if="
              PlatFormValue != 'weixinshipinhao' &&
              PlatFormValue != 'kuaishou' &&
              PlatFormValue != 'bilibili' &&
              PlatFormValue!= 'tiktok'
            "
            v-bind="validateInfos.download"
            :colon="false"
          >
            <a-radio-group v-model:value="modelRef.download">
              <a-radio :value="1">允许</a-radio>
              <a-radio :value="0">不允许</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            label="设置谁可以看"
            v-if="
              PlatFormValue != 'weixinshipinhao' &&
              PlatFormValue != 'kuaishou' &&
              PlatFormValue != 'bilibili' &&
              PlatFormValue != 'tiktok'
            "
            v-bind="validateInfos.visibility_type"
            :colon="false"
          >
            <a-radio-group v-model:value="modelRef.visibility_type">
              <a-radio :value="0">公开</a-radio>
              <a-radio :value="1">仅自己可见</a-radio>
              <a-radio :value="2">仅好友可见</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item
            label="谁可以看到"
            v-if="PlatFormValue == 'tiktok'"
            v-bind="validateInfos.visibility_type"
            :colon="false"
          >
          <a-select
          v-model:value="modelRef.visibility_type"
          :size="size"
          style="width: 200px"
          :options="visibility_type_options"
        ></a-select>

          </a-form-item>


           <!-- 是否禁止其他用户使用该帖子制作Duets -->
           <a-form-item
               v-if="PlatFormValue == 'tiktok'"
               label="允许合拍"
               v-bind="validateInfos.disable_duet"
               :colon="false"
             >
               <a-switch v-model:checked="modelRef.disable_duet"  
               :checkedValue="0"
               :unCheckedValue="1"
               />
             </a-form-item>

          <!-- 是否禁止其他用户使用该帖子进行Stitches -->
          <a-form-item
          v-if="PlatFormValue == 'tiktok'"
          label="允许拼接"
          v-bind="validateInfos.disable_stitch"
          layout="vertical"
            :colon="false"
          >
            <a-switch v-model:checked="modelRef.disable_stitch"  
            :checkedValue="0"
            :unCheckedValue="1"
            />
          </a-form-item>

          <!-- 是否禁止其他用户对此帖子发表评论 -->
          <a-form-item
          label="允许评论"
            v-if="PlatFormValue == 'tiktok'"
            v-bind="validateInfos.disable_comment"
            :colon="false"
          >
            <a-switch v-model:checked="modelRef.disable_comment"  
            :checkedValue="0"
            :unCheckedValue="1"
            />
          </a-form-item>

          <a-form-item
          label="AI生成"
            v-if="PlatFormValue == 'tiktok'"
            v-bind="validateInfos.is_aigc"
            :colon="false"
          >
            <a-switch v-model:checked="modelRef.is_aigc"  
            :checkedValue="1"
            :unCheckedValue="0"
            />
          </a-form-item>


          <!-- 发布时间 -->
          <a-form-item
            label="发布时间"
            v-if="is_Douyin_type !== 'qr_code'"
            v-bind="validateInfos.release_type"
            :colon="false"
          >
            <a-radio-group
              @change="changeReleaseTimeType"
              v-model:value="modelRef.release_type"
              :options="releaseTimeOptions"
            />
            <a-button
              type="link"
              v-if="modelRef.release_type == 2"
              size="small"
              @click="setPublishHandle"
              >设置定时发布</a-button
            >
          </a-form-item>

          <!-- 发布间隔-立即发布才会展示 -->
          <a-form-item
            label="发布间隔"
            v-if="modelRef.release_type == 1 && is_Douyin_type !== 'qr_code'"
            v-bind="validateInfos.video_interval"
            :colon="false"
          >
            <a-row align="middle" :gutter="[10, 16]">
              <a-col>每个视频间隔</a-col>
              <a-col>
                <a-select
                  v-model:value="modelRef.video_interval"
                  style="width: 100px"
                  :options="videoIntervalOptions"
                ></a-select>
              </a-col>
              <a-col>
                <a-tooltip>
                  <template #title
                    >发布时每个视频之间的最小发布时间间隔，若选择“无”则表示没有间隔
                  </template>
                  <question-circle-outlined />
                </a-tooltip>
              </a-col>
              <a-col style="margin-left: 5px">单个账号间隔</a-col>
              <a-col>
                <a-select
                  v-model:value="modelRef.account_interval"
                  style="width: 100px"
                  :options="accountIntervalOptions"
                ></a-select>
              </a-col>
              <a-col>
                <a-tooltip>
                  <template #title
                    >单账号之间连续发布视频的最小发布时间间隔，若选择“无”则表示没有间隔
                  </template>
                  <question-circle-outlined />
                </a-tooltip>
              </a-col>
            </a-row>
          </a-form-item>
          <!-- v-if="PlatFormValue == 'douyin' && import.meta.env.ELECTRON" 
          -->
          <a-form-item
            label="发布方式"
             v-if="(PlatFormValue == 'douyin' || PlatFormValue == 'weixinshipinhao')"
          >
          <a-radio-group v-model:value="modelRef.job_type" :options="job_typeOptions" />
        </a-form-item>
        <p style="color:red; font-size: 12px;">同一账号如果同时发布多条，则系统自动随机相隔延后 15-30 分钟发布</p>
        <div v-if="PlatFormValue == 'douyin' || PlatFormValue == 'weixinshipinhao'">
          <p style="color:red; font-size: 12px;">推荐选择本地化发布方式，发布速度更快，选择本地化发布时请勿关闭程序软件，否则会导致发布任务失败。</p>
          <a-button type="link" @click="downLoadClient" v-if="!isElectronEnv">
            <span style="line-height: 10px">
              <ArrowDownOutlined  /> 点我下载客户端发布  <ArrowDownOutlined  />
            </span>
          </a-button>
        </div>
        <a-form-item
          v-if="PlatFormValue == 'tiktok'"
          label="品牌与商业合作披露"
          >
            <a-switch v-model:checked="cooperate"  
            :checkedValue="0"
            :unCheckedValue="1"
            />
          </a-form-item>

          <p style="color: #777; margin: 0; margin-bottom:10px ;" v-if="PlatFormValue == 'tiktok'">告知其他人此作品推广的是品牌、商品或服务。</p>

          <template v-if="PlatFormValue == 'tiktok' && cooperate == 0">
                  <a-checkbox v-model:checked="checked1">你的品牌 
                    <a-tooltip placement="top">
                      <template #title>
                        <span>告知其他人此作品推广的是品牌、商品或服务。</span>
                      </template>
                      <question-circle-outlined />
                    </a-tooltip>
                  </a-checkbox>

            <a-checkbox v-model:checked="checked2">合作品牌 
                           <a-tooltip placement="top">
                      <template #title>
                        <span>你与某个品牌是合作伙伴赞助商关系。
                        发布视频后，请打开TKkTok移动应用并在视频的【广告设置】下链接相关活
                        动。</span>
                      </template>
                      <question-circle-outlined />
                    </a-tooltip>
            </a-checkbox>
          </template>

          <p class="tiktok_bottom_text_content" v-if="PlatFormValue == 'tiktok' && cooperate == 0 && checked2">
            发布作品即表示同意TikTok官方的
            <span class="tiktok_bottom_text" @click="toPolicy">品牌内容政策</span>
            和
            <span class="tiktok_bottom_text" @click="TiktokPolicyDialogRef?.open">音乐使用权限确认</span>。
          </p>

        </a-form>
      </div>
      <div class="footer-submit">
        <a-space>
          <a-button
            :disabled="submitDisabled"
            type="primary"
            style="background: #2878ff; border: none; border-radius: 6px"
            @click="submitClick"
            :loading="submitLoading"
          >
            生成发布计划
          </a-button>
          <a-button style="border-radius: 6px" @click="cancelClick"
            >取消</a-button
          >
        </a-space>
      </div>
    </div>
    <!-- :id="modelRef.merchant_library_id" -->
    <!-- 添加成片组件 -->
    <CloudImageLibrary
      :film_type="modelRef.film_type"
      :visible="imageLibraryVisible"
      :filmVideoIds="filmVideoIds"
      :new_filmVideoList="filmVideoList"
      :selectVideoList="selectVideoList"
      :poiKey="poiKey"
      :libraryList="libraryList"
      :editingList="editingList"
      @onCancel="imageLibraryVisible = false"
      @onConfirm="onConfirmChange"
    />

    <!-- 选择门店POI -->
    <StorePOI
      :visible="visibleStorePOI"
      :poiId="poiId"
      :M_name="M_name"
      @onCancel="visibleStorePOI = false"
      @onConfirm="onConfirmStorePOI"
    />

    <StorePOI_XHS
      ref="StorePOI_XHS_ref"
      :visible="visibleStorePOI_XHS"
      :xhs_poiId="xhs_poiId"
      :PlatFormValue="PlatFormValue"
      @onCancel="visibleStorePOI_XHS = false"
      @onConfirm="onConfirmStorePOI"
      :accountList="accountList"
    />
    <!-- AI扩写 -->
    <AIExpansion ref="aiExpansionRef" @onConfirm="onConfirmAIExpansion" />

    <!-- 选择账号 -->
    <ChooseAccountModal
      :filmVideoListLength="filmVideoList.length"
      :sourceType="source_type"
      @onSuccess="onSuccessChooseAccount"
      ref="chooseAccountModalRef"
    />
    <!-- 预览 -->
    <PreviewModal
      :visible="visibleImage"
      @onCancel="visibleImage = false"
      :url="previewImgUrl"
      :title="previewTitle"
      :type="typeChange"
    />

    <swiperPreview
      :visible="swiperVisible"
      :coverArr="imageArr"
      @close="(swiperVisible = false), (imageArr = [])"
    />
    <!-- 添加标题 -->
    <addTitleDrawer
      ref="addTitledrawer"
      :PlatFormValue="PlatFormValue"
      @success="addTitleSuccess"
      :title_list="titleList"
      :accountList="accountList || []"
    />
    <!-- 添加位置 -->
    <addPoiList
      ref="addpoilist"
      @deletePoiList="deletePoiList"
      :poiList="poiList"
      @addPoiList="storePOI"
      @success="addPoiSuccess"
    />

    <DouyinTuangou
      ref="DouyinTuanRef"
      :now_douyin_tuanID="now_douyin_tuanID"
      :edit_page_poi_id="edit_page_poi_id"
      :spu_id="spu_id"
      @SaveFn="SaveFn"
      @closeFnitem="closeFnitem"
    />

    <!--小红书 添加位置 -->
    <addPoiListRedBook
      ref="addPoiListRedBookRef"
      @deletePoiList="deletePoiList"
      :poiList="poiList"
      @addPoiList="storePOI"
      @success="addPoiSuccess"
    />
    <!-- 添加小程序组件 -->
    <addMobilDrawer
      ref="addmobilDrawer"
      :mobileList="mobileList"
      :anchor_mini="anchor_mini"
      :accountList="accountList"
      @success="addMobilSuccess"
      @updateItemAccount="updateItemAccount"
    />
    <!-- 添加小黄车组件 -->
    <addSmallYellowCart
      ref="addsmallYellowCart"
      :accountList="accountList"
      :cartList="shop_cart"
      @success="addSmallYellowCartSuccess"
    />
    <!-- 发布时间组件 -->
    <AddPublishTime
      @onClose="TimeSetSuccess"
      :accountListLength="accountList.length"
      :videoPublishTotalCount="filmVideoList.length"
      :getTitle="getTitle"
      ref="addPublishTime"
    />
    <SetParlabelModal ref="SetParlabelRef" @success="SetParlabelSuccess" />
    <shipinghaocar ref="shipinghaocarRef" @success="shipingcarSuccess" />

    <NewAddPOIList
      :visible="visiblePOI"
      :platform_account_user_id="platform_account_user_id"
      :checked_poi="checked_poi"
      @onClose="poiclose"
    />


    <AIWritingTitle :visible="writingTitleVisible" @close="closeChange" @submit="submitChange" :titleListNum="titleListNum"  type="1"/>

    <!-- 音乐使用权限弹窗 -->
    <TiktokPolicyDialog ref="TiktokPolicyDialogRef"></TiktokPolicyDialog>

     <!-- 下载客户端 -->
    <DownloadModal
      v-model:visible="downLoadVisible"
      @close="downLoadVisible = false"
    />


     <!-- 素材库 -->
  <ChooseMaterial
    useType="AIdigitalHuman"
    :isClip="true"
    material_type="video"
    :multiple="true"
    :extension="extension"
    :visible="visible"
    
  />
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  watch,
  nextTick,
  ref,
  onMounted,
  createVNode,
} from "vue";
import CreateFixed from "../components/CreateFixed/index.vue";
import swiperPreview from "../MaterialCenter/swiperPreview.vue";
import {
  PlusOutlined,
  CloudUploadOutlined,
  DeleteOutlined,
  QuestionCircleOutlined,
  CloseOutlined,
  RightOutlined,
  ExclamationCircleOutlined,
  EllipsisOutlined,
  EditOutlined,
  InfoCircleOutlined,
  UploadOutlined,
  DownloadOutlined,
  CloudDownloadOutlined,
  ArrowDownOutlined
} from "@ant-design/icons-vue";
import { useRoute, useRouter } from "vue-router";
import CloudImageLibrary from "./modules/CloudImageLibrary.vue";
import { Form, message } from "ant-design-vue";
const useForm = Form.useForm;
import AIExpansion from "./modules/AIExpansion.vue";
import ChooseAccountModal from "./modules/ChooseAccountModal.vue";
import request from "../../../common/utils/request";
import PreviewModal from "../../../components/PreviewModal/index.vue";
import NewAddPOIList from "@/views/shotstack/MatrixMarketing/modules/newAddPOIList.vue";
import dayjs from "dayjs";
import moment from "moment";
import StorePOI from "./modules/StorePOI.vue";
// 小红书选择位置信息
import StorePOI_XHS from "./modules/StorePOI_XHS.vue";
// 添加标题组件
import addTitleDrawer from "./modules/addTitleDrawer.vue";
// 添加位置组件
import addPoiList from "./modules/addPoiList.vue";
// 添加位置组件
import DouyinTuangou from "./modules/DouyinTuangou.vue";
// 添加位置组件
import addPoiListRedBook from "./modules/addPoiListRedBook.vue";
// 添加小程序组件
import addMobilDrawer from "./modules/addMobilDrawer.vue";
// 添加小黄车组件
import addSmallYellowCart from "./modules/addSmallYellowCart.vue";
import { Modal } from "ant-design-vue";
import _ from "lodash";
import { template } from "lodash";
import AddPublishTime from "./addPublishTime.vue";
import SetParlabelModal from "./modules/SetParlabelModal.vue";
import shipinghaocar from "./modules/shipinghaocar.vue";
import utils from "@/common/utils/utils.js";
import { debounce } from "lodash";

// 上传成片组件
import Upload from '@/views/shotstack/components/Upload/index.vue' 
const UploadRef = ref()

// 加载中
import loadingMask from '@/components/loadingMask/index.vue'
 const loadingMaskRef = ref()

// AI写标题
import AIWritingTitle from "../components/AIWritingTitle/index.vue"

// 音乐使用权限
import TiktokPolicyDialog from '@/views/shotstack/MatrixMarketing/TiktokPolicyDialog.vue'

// 下载客户端
import DownloadModal from "./modules/DownloadModal.vue";


let douYinUrl = "";

export default defineComponent({
  name: "QrRelease",
  components: {
    TiktokPolicyDialog ,
    Upload,
    loadingMask,
    PlusOutlined,
    UploadOutlined,
    CloudUploadOutlined,
    DownloadOutlined,
    CloudImageLibrary,
    DeleteOutlined,
    QuestionCircleOutlined,
    AIExpansion,
    ChooseAccountModal,
    CloseOutlined,
    PreviewModal,
    swiperPreview,
    RightOutlined,
    addTitleDrawer,
    addPoiList,
    addMobilDrawer,
    ExclamationCircleOutlined,
    InfoCircleOutlined,
    addSmallYellowCart,
    StorePOI,
    AddPublishTime,
    EllipsisOutlined,
    EditOutlined,
    SetParlabelModal,
    StorePOI_XHS,
    shipinghaocar,
    addPoiListRedBook,
    NewAddPOIList,
    DouyinTuangou,
    AIWritingTitle,
    CloudDownloadOutlined,
    DownloadModal,
    ArrowDownOutlined
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      dropdownVisible: false,
      showLoadMoreButton: true,
      cursor: 0,
      count: 10,
      keyword: "",
      checkedItem: [],
      value_taungou_loading: false,
      spu_id: "",
      edit_page_poi_id: "",
      now_douyin_tuanID: "",
      ce_value: "",
      douyintaunList: [],
      value_taungou: [],
      is_douyin_tuangou: false,
      checked_poi: "",
      visiblePOI: false,
      platform_account_user_id: "",
      default_corver:
        utils.staticPath + "images/workAi/shotstack/default_corver.png",
      is_kuaishou_goods: false,
      kuaishou_goods: [],
      kuaishou_goodList: [],
      ruleUrl: "",
      ruleTip: "",
      reachLimit: false,
      only_shipingcar: [],
      enablePostWithProduct: false,
      weixinshipinhao_loading: false,
      // 有成片的混剪列表
      editingList: [],
      M_name: "",
      swiperVisible: false,
      imageArr: [],
      platformKey: 1,
      imageLibraryVisible: false, //控制添加成片抽屉显示隐藏
      visibleStorePOI: false, //控制添加门店弹窗显示隐藏
      visibleStorePOI_XHS: false, //控制添加小红书门店弹窗
      releaseTimeOptions: [
        {
          value: "1",
          label: "立即发布",
        },
        {
          value: "2",
          label: "定时发布",
        },
      ],
      // 是否禁止其他用户使用该帖子制作Duets
      disable_duet: [
        {
          value: 1,
          label: "禁止",
        },
        {
          value: 0,
          label: "允许",
        }
      ],

      // 是否禁止其他用户使用该帖子进行Stitches
      disable_disable_stitch: [
        {
          value: 1,
          label: "禁止",
        },
        {
          value: 0,
          label: "允许",
        }
      ],

      // 是否禁止其他用户使用该帖子进行Stitches
      disable_disable_comment: [
        {
          value: 1,
          label: "禁止",
        },
        {
          value: 0,
          label: "允许",
        }
      ],

      disable_stitch: [
        {
          value: 1,
          label: "同意",
        },
        {
          value: 0,
          label: "不同意",
        }
      ],
      videoIntervalOptions: [
        {
          label: "无",
          value: 0,
        },
        {
          label: "3分钟",
          value: 3,
        },
        {
          label: "5分钟",
          value: 5,
        },
        {
          label: "10分钟",
          value: 10,
        },
        {
          label: "15分钟",
          value: 15,
        },
        {
          label: "20分钟",
          value: 20,
        },
      ],
      // 单个账号间隔
      accountIntervalOptions: [
        {
          label: "无",
          value: 0,
        },
        {
          label: "1小时",
          value: 1,
        },
        {
          label: "2小时",
          value: 2,
        },
        {
          label: "4小时",
          value: 4,
        },
        {
          label: "6小时",
          value: 6,
        },
        {
          label: "8小时",
          value: 8,
        },
        {
          label: "12小时",
          value: 12,
        },
        {
          label: "24小时",
          value: 24,
        },
        {
          label: "48小时",
          value: 48,
        },
        {
          label: "72小时",
          value: 72,
        },
      ],

      visibleAIExpansion: false, //控制AI扩写弹窗显示隐藏

      visibleChooseAccount: false, //控制选择账号弹窗显示隐藏

      fetching: false,
      libraryList: [], //项目列表
      accountList: [], //账户列表
      // poi数组
      poiList: [],
      // 可选择的 poiList
      poiListAll: [],
      poiKey: 0,
      filmVideoList: route.query?.release
        ? JSON.parse(route.query.release)
        : [], //成片列表
      filmVideoIds: route.query?.release
        ? JSON.parse(route.query.release)?.map((i) => i.id)
        : [], //成片列表id集合
      titleList: [], //标题列表
      visibleImage: false, //控制素材预览弹窗显示和隐藏
      previewImgUrl: "", //预览素材的地址
      typeChange: "video",
      previewTitle: "", //预览标题
      selectVideoList: [], //选择的成片视频列表
      submitLoading: false, //生成发布计划按钮的loading状态
      // storeAddress: "",
      mobileUrl: undefined,
      mobileUrlOptions: [],
      anchorData: undefined,
      musicDrawerVisible: false,
      accountId: 0,
      musicTitle: "",
      music_end_time: "",
      // 挂载内容
      anchorTypeList: [],
      mobileList: [], //小程序链接地址
      anchor_mini: [
        // {
        //   anchor_id: "", //小程序id
        //   Query: "",
        //   Title: "",
        //   Token: "",
        // },
      ], //小程序信息
      addYellowCartLoading: false, //控制添加小黄车按钮loading状态
      shop_cart: [], //购物车列表
      hasAddCartCountCount: 0, //挂载小黄车账号数量
      borderErrStyle: false,
      // 定时发布
      timed_release_data: [
        {
          date: "",
          week: "",
          holiday: [],
          time: [
            {
              start_time: "",
              end_time: "",
              time_period: [],
            },
          ],
        },
      ],
      addPublishTime: null, //添加自定义发布时间组件实例
      app_platform_list: {},
      chooseAccountModalRef: null, //设置账号弹窗组件实例
      SetParlabelRef: null, //设置分区和标签组件实例
      shipinghaocarRef: null,
      archive_type: [], //分区类型
      tagList: [], //标签列表

      // 小红书 位置列表
      locationList: [],
      is_Douyin_type: "api",

      // tiktok 谁可以看到
      visibility_type_options: [
        {
          label: "全部",
          value: 0,
        },
        {
          label: "好友",
          value: 2,
        },
        {
          label: "自己",
          value: 1,
        },
      ] ,
      // 下载客户端
      downLoadVisible:false,
      visible: false,//新增
      extension: "",//新增
    });

    const isElectronEnv = import.meta.env.ELECTRON;

    // 判断是否是抖音扫码发布
    const douyinQrcode = computed(() => {
      const flage =
        state.is_Douyin_type == "qr_code" && PlatFormValue.value == "douyin";
      console.log(state.is_Douyin_type, PlatFormValue.value);
      return flage;
    });

    // 小红书选择位置弹窗实例
    const StorePOI_XHS_ref = ref(null);

    onMounted(() => {
      if (route.query?.material_type == "image") {
        modelRef.film_type = 2;
      } else {
        modelRef.film_type = 1;
      }
      // 暂时只有小红书和抖音, 可以挂载内容
      if (route.query.platform == "douyin") {
        state.anchorTypeList = [
          {
            label: "无",
            value: 0,
            disabled: false,
          },
          {
            label: "位置",
            value: 1,
            disabled: false,
          },
          {
            label: "抖音小程序",
            value: 2,
            disabled: false,
          },
          {
            label: "抖音小黄车",
            value: 3,
            disabled: false,
          },
        ];

        if (route.query.type && route.query.type == "qr_code") {
          state.is_Douyin_type = "qr_code";
        }
      } else if (route.query.platform == "xiaohongshu") {
        state.anchorTypeList = [
          {
            label: "无",
            value: 0,
            disabled: false,
          },
          {
            label: "位置",
            value: 1,
            disabled: true,
          },
        ];
      } else {
        state.anchorTypeList = [
          {
            label: "无",
            value: 0,
            disabled: false,
          },
        ];
      }
    });

    const anchorTypeListComputed = computed(() => {
      if (route.query.platform == "douyin") {
        if (douyinQrcode.value) {
          return [
            {
              label: "无",
              value: 0,
              disabled: false,
            },
            {
              label: "位置",
              value: 1,
              disabled: false,
            },
          ];
        } else {
          return [
            {
              label: "无",
              value: 0,
              disabled: false,
            },
            {
              label: "位置",
              value: 1,
              disabled: false,
            },
            {
              label: "抖音小程序",
              value: 2,
              disabled: false,
            },
            {
              label: "抖音小黄车",
              value: 3,
              disabled: false,
            },
            {
              label: "团购",
              value: 4,
              disabled: false,
            },
          ];
        }
      } else if (route.query.platform == "xiaohongshu") {
        return [
          {
            label: "无",
            value: 0,
            disabled: false,
          },
          {
            label: "位置",
            value: 1,
            disabled: state.accountList?.length <= 0,
            tip: state.accountList?.length <= 0 ? "请先添加账号" : "",
          },
        ];
      } else if (route.query.platform == "kuaishou") {
        return [
          {
            label: "无",
            value: 0,
            disabled: false,
          },
          {
            label: "添加商品",
            value: 1,
            disabled: false,
          },
        ];
      } else {
        return [
          {
            label: "无",
            value: 0,
            disabled: false,
          },
        ];
      }

      return state.anchorTypeList.filter((item) => !item.disabled);
    });
    const getAccountList = () => {
      request
        .get("/work_ai", "/org/platform/account/shotStackList", {
          filterShow: 1, //是否过滤掉没有对接的平台 1-是 0-不是
        })
        .then((res) => {
          state.app_platform_list = res.result;
        });
    };
    getAccountList();
    const getTitle = computed(() => {
      if (!state.app_platform_list.length) {
        return null;
      }
      const platform = state.app_platform_list.find(
        (item) => item.key == route.query.platform
      );
      return platform ? platform.value : null;
    });
    // 路由信息
    const PlatFormValue = computed(() => {
      return route.query.platform;
    });
    const submitDisabled = computed(() => {
      if (!state.app_platform_list.length) {
        return null;
      }
      const platform = state.app_platform_list.find(
        (item) => item.key == route.query.platform
      );
      return platform?.developing == 1;
    });
    watch(
      () => route.query.choose,
      (val) => {
        let video_ids = [];
        if (val == "1") {
          video_ids.push(route.query.id);
        } else if (val == "2") {
          video_ids = route.query.ids;
        }
        if (val !== "") {
          if (video_ids.length !== 0) {
            request
              .post("/work_ai", "/user/shotstack/media/byIds", { video_ids })
              .then((res) => {
                if (res.result.length > 0) {
                  state.filmVideoList = res.result.map((item) => ({
                    ...item,
                    checked: true,
                  }));
                  modelRef.intoPieces = state.filmVideoList;
                }
              });
          }
        }
      },
      {
        immediate: true,
      }
    );

    const modelRef = reactive({
      checked: false,
      film_type: 1, //成片类型：1-视频，2-图集
      intoPieces: [],
      releaseTime: [],
      release_type: "1", //发布时间：1-立即发布，2-定时发布,3-扫码发布
      download: 1,
      anchor_type: state.poiKey ? 1 : 0,
      visibility_type: 0,
      video_interval: 0,
      account_interval: 0,
      name: "",
      // 发布类型 - 都有抖音 客户端才显示
      name: "",
      // 发布类型 - 线上1 本地2 都有抖音 客户端才显示
      job_type: 1,
      disable_stitch: 0, 
      disable_comment: 0,
      disable_duet: 0,
      // ai生成
      is_aigc: 0, 
    });

    const job_typeOptions = ref([
      {
        label: "线上发布",
        value: 1,
        disabled: false,
      },
      {
        label: "本地发布",
        value: 2,
        disabled: !import.meta.env.ELECTRON,
      },
    ])

    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: "请输入项目名称",
        },
      ],
      film_type: [
        {
          required: true,
          message: "请选择类型",
        },
      ],
      intoPieces: [
        {
          required: true,
          message: "请添加成片",
        },
      ],
      release_type: [
        {
          required: true,
          message: "发布时间",
        },
      ],
      releaseTime: [
        {
          validator: (_, value) => {
            console.log(value, "选择账号value");
            if (
              state.is_Douyin_type === "qr_code" &&
              PlatFormValue.value === "douyin" &&
              !value
            ) {
              return Promise.reject(new Error("请选择账号"));
            }
            return Promise.resolve();
          },
          trigger: "change", // 根据需要设置触发校验的时机
        },
      ],
      // releaseTime: (() =>(state.is_Douyin_type == 'qr_code' && PlatFormValue.value == 'douyin') ? [

      // ]:[
      //   {
      //     // required: douyinQrcode.value ? false : true,
      //     required: true,
      //     message: "请选择账号",
      //   },
      // ]),
      video_interval: [
        {
          required: true,
        },
      ],
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    // 获取项目列表
    const getLibraryList = () => {
      state.fetching = true;
      request
        .get("/work_ai", "/user/shotstack/library/withGroup/list")
        .then((res) => {
          state.libraryList = res.result.map((item) => {
            return {
              label: item.name,
              value: item.id,
              default: item.default_group_id,
            };
          });
          state.fetching = false;
        });
    };
    getLibraryList();

    const getEditingList = async () => {
      const res = await request.get("/work_ai", "/user/shotstack/editing/list");
      state.editingList = res.result.map((item) => {
        return {
          label: item.title,
          value: item.id,
        };
      });
    };
    getEditingList();
    // 选择项目
    const storePOI = () => {
      if (state.poiList.length) {
        state.poiId = state.poiList.map((item) => item.id);
      } else {
        state.poiId = [];
      }

      if (PlatFormValue.value == "xiaohongshu") {
        StorePOI_XHS_ref.value.dataRecovery(state.poiList);
        state.visibleStorePOI_XHS = true;
      } else {
        state.visibleStorePOI = true;
      }
    };
    const onConfirmStorePOI = (list) => {
      state.poiList = list;
      if (PlatFormValue.value == "xiaohongshu") {
        state.visibleStorePOI_XHS = false;
      } else {
        state.visibleStorePOI = false;
      }
    };
    // 打开添加成片抽屉
    const intoPiecesClick = () => {
      // 如果有门店的情况下
      if (state.poiKey) {
        let videoList = [];
        state.poiList.forEach((item) => {
          if (item.video_list) {
            videoList.push({
              video_list: item.video_list,
              store_id: item.store_id,
            });
          }
        });

        state.selectVideoList = videoList;
        state.imageLibraryVisible = true;
        return;
      }
      state.filmVideoIds = state.filmVideoList.map((item) => item.id);

      console.log(state.filmVideoList, "1111111111dwdwdw");
      state.imageLibraryVisible = true;
    };

    // 添加成片
    const onConfirmChange = (list) => {
      if (state.poiKey) {
        // 为每个门店单独存放一个成片数组字段 保存的时候用
        state.poiList.forEach((item) => {
          if (state.poiKey == item.id) {
            //选中 checked为true的
            state.filmVideoList = state.filmVideoList.concat(
              list.filter((i) => i.checked)
            );

            //取消弹框选中后的传给父组件处理当时已经选择的checkd为false
            state.filmVideoList.forEach((film) => {
              list.forEach((v) => {
                if (!v.checked && v.id == film.id) {
                  film.checked = false;
                }
              });
            });
            // 处理筛选列表为true的
            state.filmVideoList = state.filmVideoList.filter(
              (film) => film.checked
            );

            item.store_id = item.id;
            item.video_list = state.filmVideoList;
            item.videoListLength = state.filmVideoList.length;
            item.video_ids = item.video_list.map((video) => video.id);
            item.video_ids = [...new Set(item.video_ids)];
          }
        });
        modelRef.intoPieces = state.filmVideoList;
        state.imageLibraryVisible = false;
        return;
      }

      state.filmVideoList = list;
      state.imageLibraryVisible = false;
      modelRef.intoPieces = state.filmVideoList;
    };

    // 删除成片
    const deleteFilmVideo = (index) => {
      Modal.confirm({
        title: "删除成片",
        icon: createVNode(ExclamationCircleOutlined),
        content: "确定删除成片吗？",
        cancelText: "取消",
        okText: "确定",
        onOk() {
          state.filmVideoList = state.filmVideoList.filter(
            (item, Vindex) => Vindex !== index
          );
          state.poiList.forEach((item) => {
            if (item.store_id == state.poiKey) {
              item.video_list = state.filmVideoList;
              item.video_ids = item.video_list.map((video) => video.id);
              item.videoListLength = state.filmVideoList.length;
            }
          });
          if (!state.filmVideoList.length) {
            modelRef.intoPieces = [];
          }
          message.success("删除成功");
        },
        onCancel() {},
      });
    };

    // 查看视频
    const previewImg = (data) => {
      if (data?.image_ary && data?.image_ary?.length) {
        state.swiperVisible = true;
        state.imageArr = data?.image_ary;
        return;
      }
      state.previewImgUrl = data.material_url;
      state.typeChange = data.material_type;
      state.previewTitle = data.material_name;
      state.visibleImage = true;
    };
    // 删除标题
    const deleteTitle = (index) => {
      if (AILoading.value) {
        return message.warning("AI扩写生成中请耐心等待");
      }
      if (state.titleList.length <= 1) {
        return message.warning("至少保留一个标题");
      } else {
        Modal.confirm({
          title: "删除标题",
          icon: createVNode(ExclamationCircleOutlined),
          content: "确定删除标题吗",
          cancelText: "取消",
          okText: "确定",
          onOk() {
            state.titleList.splice(index, 1);
            state.titleList.forEach((item, index) => {
              item.title = `标题${index + 1}`;
            });
            message.success("删除成功");
            console.log(state.titleList);
          },
          onCancel() {},
        });
      }
    };
    // 标题校验
    const validateTitles = (rule, value) => {
      return new Promise((resolve, reject) => {
        if (PlatFormValue.value == "weixinshipinhao") {
          // 检查标题是否为空
          if (!value || value.trim() === "") {
            return reject("请输入标题");
          }

          // 定义允许的字符集
          const allowedChars =
            /^[a-zA-Z0-9\u4e00-\u9fa5《》“”‘’:：+-?？%℃\s]+$/;

          // 检查标题是否包含不允许的字符
          if (!allowedChars.test(value)) {
            return reject(
              "标题不能包含特殊字符，符号仅支持书名号、引号、冒号、加号、问号、百分号、摄氏度，逗号可用空格代替"
            );
          }

          // 检查标题长度是否超过16字（含空格）
          if (value.length > 16) {
            return reject("标题不能超过16字限制（含空格）");
          }
        } else {
          // 对于其他平台，只进行非空校验
          if (!value || value.trim() === "") {
            return reject("请输入标题");
          }
        }
        resolve();
      });
    };

    // 最大标题长度及提示
    const TitleTextTipRules = computed(() => {
      if (PlatFormValue.value == "douyin") {
        return {
          tips: "标题不能超过30字限制(含空格)。",
          maxlength: 30,
        };
      } else if (PlatFormValue.value == "kuaishou") {
        return {
          tips: "标题不能超过30字限制(含空格)。",
          maxlength: 30,
        };
      } else if (PlatFormValue.value == "weixinshipinhao") {
        return {
          tips: "标题不能包含特殊字符，符号仅支持书名号、引号、冒号、加号、问号、百分号、摄氏度，逗号可用空格代替。且标题不能超过16字限制(含空格)。",
          maxlength: 16,
        };
      } else if (PlatFormValue.value == "xiaohongshu") {
        return {
          tips: "标题不能超过20字限制(含空格)。",
          maxlength: 20,
        };
      }
    });
    // 标签Change
    const tagChange = (event, item, optionsList) => {
      state.kuaishou_goods[state.kuaishou_goods.length - 1];

      // 获取最新输入的值
      const lastItem = state.kuaishou_goods[state.kuaishou_goods.length - 1];

      // 检查是否为纯数字
      if (lastItem && !/^\d+$/.test(lastItem)) {
        message.warning("只能输入数字");
        // 清空最新的输入项
        state.kuaishou_goods.pop();
      }
      return;
      if (event.length && event[event.length - 1].length > 10) {
        message.warning("单个话题长度不能超过10个字符");
        item.hashtag_name[item.hashtag_name.length - 1] = item.hashtag_name[
          item.hashtag_name.length - 1
        ].substring(0, 10);
      }
      if (event.length > 5) {
        message.warning("最多添加5个话题");
        item.hashtag_name = item.hashtag_name.filter((tag, index) => index < 5);
      }
      // 根据选中的值替换成 label
      item.hashtag_name = item.hashtag_name.map((tag) => {
        const option = optionsList?.find((ele) => ele.value == tag);
        return option ? option.label : tag;
      });
      searchChange();
    };

    const searchChange = () => {
      state.poiList.forEach((item) => {
        if (item.id == state.poiKey) {
          item.titleList = state.titleList;
        }
      });
    };

    // AI扩写
    const addAIExpansion = () => {
      aiExpansionRef.value && aiExpansionRef.value.showModal();
    };

    const onConfirmAIExpansion = (arr) => {
      aiExpansionRef.value && aiExpansionRef.value.cancelClick();
      if (arr) {
        state.titleList = [];
        arr.map((item) => {
          state.titleList.push({
            title: `标题${state.titleList.length + 1}`,
            key: state.titleList.length + 1,
            text: "",
            caption: item.text, //作品简介
            hashtag_name: [],
            isSpining: false,
            ai_keyword_group_id: item.ai_keyword_group_id,
            ai_keyword_id: item.ai_keyword_id,
            keyWordsGroupList: item.keyWordsGroupList,
            keyWordsList: item.keyWordsList,
          });
        });
      }
    };

    // 选择账号
    const chooseAccountClick = () => {
      if (!state.filmVideoList.length) {
        return message.error("请添加成片");
      }
      state.chooseAccountModalRef &&
        state.chooseAccountModalRef.showModal(state.accountList);
    };
    // 选择账号后弹框关闭
    const onSuccessChooseAccount = (info) => {
      if (info.length) {
        state.accountList = _.uniqBy(info, "id");
      }
      state.accountList = state.accountList.map((account) => ({
        ...account, // 拷贝原有属性
        enablePostWithProduct: false,
        reachLimit: false,
        weixinshipinhao_loading: false,
        is_success: false,
      }));
      modelRef.releaseTime = JSON.parse(JSON.stringify(state.accountList));

      // 仅限视频号
      if (
        modelRef.releaseTime.length > 0 &&
        PlatFormValue.value == "weixinshipinhao"
      ) {
        state.weixinshipinhao_loading = true;

        modelRef.releaseTime.forEach((item, index) => {
          let id = item.id;
          state.accountList[index].weixinshipinhao_loading = true;
          request
            .get("/work_ai", `/platform/account/check/with`, { id: id })
            .then((res) => {
              state.accountList[index].weixinshipinhao_loading = false;
              state.accountList[index].is_success = true;
              modelRef.releaseTime[index].is_success = true;
              if (res.result.enablePostWithProduct == 1) {
                state.accountList[index].enablePostWithProduct = true;
                if (res.result.reachLimit) {
                  state.accountList[index].reachLimit = true;
                  state.accountList[index].enablePostWithProduct = false;
                  state.ruleUrl = res.result.ruleUrl;
                  state.ruleTip = res.result.ruleTip;
                }
              } else {
                state.accountList[index].enablePostWithProduct = false;
              }
            });
        });
      }

      // if (PlatFormValue.value == "douyin") {
      //   const newItem = {
      //     label: "团购",
      //     value: 4,
      //     disabled: false,
      //   };

      //   // 检查数组中是否已存在相同的 value 值
      //   const itemExists = anchorTypeListComputed.value.some(
      //     (item) => item.value === newItem.value
      //   );

      //   if (!itemExists) {
      //     anchorTypeListComputed.value.push(newItem);
      //   }
      // }

      state.chooseAccountModalRef && state.chooseAccountModalRef.closeModal();
    };

    // 账号列表删除
    const closeClick = (index) => {
      Modal.confirm({
        title: "删除账号",
        icon: createVNode(ExclamationCircleOutlined),
        content: "确定删除账号吗？",
        cancelText: "取消",
        okText: "确定",
        onOk() {
          state.accountList = state.accountList.filter(
            (item, accountIndex) => accountIndex !== index
          );
          state.poiList.forEach((item) => {
            if (item.id == state.poiKey) {
              item.accountList = item.accountList.filter(
                (item, accountIndex) => accountIndex !== index
              );
              item.accountListLength = state.accountList.length;
            }
          });
          if (!state.accountList.length) {
            modelRef.releaseTime = [];
          }
          message.success("删除成功");
        },
        onCancel() {},
      });
    };
    // 小程序挂载要求
    const requirementsClick = () => {
      window.open(
        "https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/open-capacity/flow-entrance/douyin/video/common-mount"
      );
    };

    let time = null;
    const handleSearchChange = (index, url) => {
      if (!url) {
        state.mobileUrlOptions = [];
        state.accountId = 0;
        return;
      }
      if (!state.accountList.length && !douyinQrcode.value) {
        message.warn("请选择账号");
        return;
      }
      let onLine = state.accountList.filter((item) => item.status == 1);
      if (!onLine.length) {
        onLine = state.accountList.filter((item) => item.status == 0);
      }
      state.accountId = onLine[0].id;
      if (time) {
        clearTimeout(time);
      }
      time = setTimeout(() => {
        getDouyinMobile(onLine[0].id, url, index);
      }, 500);
    };

    const getDouyinMobile = (id, url, index) => {
      douYinUrl = url;
      request
        .get("/work_ai", "/org/platform/douyin/mobile", { id, url })
        .then((res) => {
          console.log(res);
          state.mobileUrlOptions = res.data.anchor_list?.map((item) => {
            return {
              label: item.name,
              value: state.mobileList[index].mobileUrl,
              ...item,
            };
          });
          console.log(state.mobileUrlOptions);
          const extra = JSON.parse(res.data.anchor_list[0].extra);
          state.anchor_mini[index] = {
            anchor_id: res.data.anchor_list[0].id, //小程序id
            Query: extra.Query,
            Title: extra.Title,
            Token: extra.Token,
          };
          console.log(state.anchor_mini);
        });
    };

    // 小程序地址change事件
    const handMoileChange = (index) => {
      if (!state.mobileList[index].mobileUrl) {
        if (state.anchor_mini.length > 0) {
          state.anchor_mini.splice(index, 1);
          console.log(state.anchor_mini);
        }
      }
    };

    const handleCloseTag = () => {
      state.anchorData = undefined;
      state.mobileUrl = "";
      modelRef.anchor_id = "";
      modelRef.anchor_extra = "";
      if (state.poiList.length) {
        state.poiList.forEach((item) => {
          if (item.id == state.poiKey) {
            item.anchor_id = "";
            item.anchor_extra = "";
          }
        });
      }
    };
    const formRef = ref();

    const handleRadioChange = () => {
      state.filmVideoList = [];
      state.filmVideoIds = [];
      state.poiList.forEach((item) => {
        if (item.id == state.poiKey) {
          item.film_type = modelRef.film_type;
        }
      });
    };

    if (state.filmVideoList?.length && state.filmVideoList[0]?.image_ary) {
      modelRef.film_type = 2;
    } else {
      modelRef.film_type = 1;
    }
    const source_type = computed(() => {
      return route.query.platform;
    });
    // 视频持续时长
    const durationTime = (e) => {
      const totalSeconds = Math.floor(e / 1000);
      const minutes = Math.floor(totalSeconds / 60);
      const seconds = totalSeconds % 60;

      const paddedMinutes = String(minutes).padStart(2, "0");
      const paddedSeconds = String(seconds).padStart(2, "0");

      return `${paddedMinutes}:${paddedSeconds}`;
    };
    // 添加标题
    const addTitledrawer = ref(null);
    const addTitleHandle = (openType) => {
      // if (openType=='add'&&state.titleList.length + 1 > 10) {
      //   return message.warning("最多添加10个标题");
      // }
      if (AILoading.value) {
        return message.warning("AI扩写生成中请耐心等待");
      }
      addTitledrawer.value.showDrawer(openType);
    };
    const addTitleSuccess = (info) => {
      console.log(info);
      state.titleList = info;
    };
    // 添加位置
    const addpoilist = ref(null);
    const addPoiListRedBookRef = ref(null);
    const addPoiHandle = () => {
      // 添加判断  是小红书 还是其他
      if (PlatFormValue.value == "xiaohongshu") {
        state.borderErrStyle = false;
        addPoiListRedBookRef.value.showDrawer();
      } else {
        state.borderErrStyle = false;
        addpoilist.value.showDrawer();
      }
    };
    const contentTip = computed(() => {
      switch (modelRef.anchor_type) {
        case 0:
          return "发布后携带的内容";
        case 1:
          return "发布后成片将携带门店添加的POI地址信息";
        case 2:
          return "发布后成片将携带抖音小程序链接";
        case 3:
          return "仅支持抖音账号开通小黄车功能挂载商品";
        default:
          break;
      }
    });
    const placeholderTetx = computed(() => {
      switch (modelRef.anchor_type) {
        case 0:
          return "";
        case 1:
          return "请选择位置";
        case 2:
          return "请输入小程序链接";
        case 3:
          return "请挂载小黄车";
        default:
          break;
      }
    });
    // 位置添加成功
    const addPoiSuccess = (info) => {
      state.poiList = info;
    };
    // 添加小程序链接
    const addmobilDrawer = ref(null);
    const addMobilHandle = () => {
      state.borderErrStyle = false;
      if (!state.accountList.length) {
        message.warn("请选择账号");
        return;
      } else {
        addmobilDrawer.value.showDrawer();
      }
    };
    // 添加小程序链接成功回调
    const addMobilSuccess = (info) => {
      state.mobileList = info.mobileList;
      state.anchor_mini = info.anchor_mini;
      console.log('state.mobileList',state.mobileList);
      console.log('state.anchor_mini',state.anchor_mini);
      
    };
    const addsmallYellowCart = ref(null); //添加小黄车组件实例
    // 添加小黄车
    const addSmallCartHandle = () => {
      state.borderErrStyle = false;
      if (!state.accountList.length) {
        message.warn("请选择账号");
        return;
      } else {
        addsmallYellowCart.value.showDrawer();
      }
    };
    const viewSmallCart = () => {
      addsmallYellowCart.value.showDrawer();
    };
    let titleFormRef = ref(); //标题表单实例

    // 取消
    const cancelClick = () => {
      router.back();
    };
    // 添加小黄车成功回调
    const addSmallYellowCartSuccess = (info) => {
      if (info.length > 0) {
        let list = info.map((item) => item.id);
        state.hasAddCartCountCount = [...new Set(list)].length;
      }

      state.shop_cart = info;
    };
    // AI扩写组件实例
    const aiExpansionRef = ref(null);
    const AILoading = computed(() => {
      return aiExpansionRef.value && aiExpansionRef.value.AILoading;
    });
    // 已生成数量
    const AIExpanSionCount = computed(() => {
      return aiExpansionRef.value && aiExpansionRef.value.AIExpanSionCount;
    });
    // 计划生成数量
    const AIExpanSionTotal = computed(() => {
      return aiExpansionRef.value && aiExpansionRef.value.AIExpanSionTotal;
    });
    // 进度条百分比
    const AIExpansionPercent = computed(() => {
      return (
        (
          (aiExpansionRef.value && aiExpansionRef.value.AIExpanSionCount) /
          (aiExpansionRef.value && aiExpansionRef.value.AIExpanSionTotal)
        ).toFixed(1) * 100
      );
    });
    onMounted(() => {
      let title = `自动发布${dayjs().format("YYYYMMDDHHmmss")}`;
      if (state.is_Douyin_type == "qr_code") {
        title = `扫码发布${dayjs().format("YYYYMMDDHHmmss")}`;
      }
      modelRef.name = title;
    });
    // 发布时间类型change事件
    const changeReleaseTimeType = () => {
      if (modelRef.release_type == 1) {
        state.timed_release_data = [
          {
            date: "",
            time: [
              {
                start_time: "",
                end_time: "",
                time_period: [],
              },
            ],
          },
        ];
      }
    };
    // 设置发布时间
    const setPublishHandle = () => {
      if (!state.filmVideoList.length) {
        return message.error("请选择要发布的成片");
      } else if (!state.accountList?.length) {
        return message.error("请选择发布账号");
      }
      console.log(state.timed_release_data);
      state.addPublishTime &&
        state.addPublishTime.showDrawer(state.timed_release_data);
    };
    // 设置发布时间成功回调
    const TimeSetSuccess = (info) => {
      state.timed_release_data = info;
    };
    // 统一设置分区和标签
    const setAllParlabel = () => {
      if (!state.accountList.length) {
        return message.error("请选择账号");
      }
      state.SetParlabelRef &&
        state.SetParlabelRef.showModal({
          openType: "all",
          accountList: state.accountList,
        });
    };
    // 设置单个账号的分区和标签
    const SetParlabelFn = (item) => {
      console.log(item);
      state.SetParlabelRef &&
        state.SetParlabelRef.showModal({
          openType: "single",
          accountList: state.accountList,
          editId: item.id,
        });
    };

    // 设置单个账号的分区和标签
    const SetshipinghaocarFn = (item) => {
      let productId;
      if (state.only_shipingcar.length > 0) {
        const matchedItem = state.only_shipingcar.find(
          (car) => car.account_id === item.id
        );
        productId = matchedItem.matchedItem.productId;
      }
      state.shipinghaocarRef &&
        state.shipinghaocarRef.showModal({
          id: item.id,
          productId: productId,
        });
    };

    // shipinghaocarRef
    const SetParlabelSuccess = (info) => {
      state.accountList = info;
    };

    const shipingcarSuccess = (info) => {
      if (!info.matchedItem) {
        state.only_shipingcar = [];
      } else {
        state.only_shipingcar = [];
        state.only_shipingcar.push({
          account_id: info.account_id,
          matchedItem: info.matchedItem,
        });
      }
    };

    // 生成发布计划
    const submitClick = () => {

      console.log(modelRef,'modelRef');

      // return
      
      const validateOtherForm = () => validate(); //默认校验
      let validateArr = [validateOtherForm()]; //默认校验
      if (titleFormRef.value) {
        // 标题校验
        const validateTitleForm = () => titleFormRef.value.validate();
        validateArr.push(validateTitleForm());
      }
      // 校验发布时间
      if (modelRef.release_type == 2) {
        // 校验发布时间
        const isEmpty = state.timed_release_data.every(
          (item) => item.date !== ""
        );
        if (!isEmpty) {
          return message.error("请设置定时发布时间");
        }
      }
      // 同时执行两个校验
      Promise.all(validateArr)
        .then(() => {
          if (!modelRef.name.trim().length) {
            return message.error("请输入项目名称");
          }
          if (
            modelRef.anchor_type == 1 &&
            state.poiList.length == 0 &&
            PlatFormValue.value !== "kuaishou"
          ) {
            return message.error("请添加位置");
          }
          if (!state.accountList?.length && !douyinQrcode.value) {
            return message.error("请选择账号");
          }
          if (state.titleList.length <= 0 && source_type.value == "kuaishou") {
            return message.error("请添加成片标题");
          }

          if (
            PlatFormValue.value == "kuaishou" &&
            state.is_kuaishou_goods &&
            state.kuaishou_goods.length == 0
          ) {
            return message.error("请输入挂载商品ID");
          }
          // 两个校验都成功完成
          let params = {
            name: modelRef.name,
            platform: route.query.platform, //平台别称
            film_type: modelRef.film_type, //成片类型：1-视频，2-图集
            release_type: modelRef.release_type, //发布时间：1-立即发布，2-定时发布,3-扫码发布
            is_random_poid: 0, //随机所有门店：0-不勾选，1-表示勾选 （暂时不做，前端隐藏，参数暂时固定传 0）
            download: modelRef.download, //允许他人保存视频：1允许 0不允许
            anchor_type: modelRef.anchor_type, //挂载内容，0-无挂载，1-门店，2-小程序链接
            visibility_type: modelRef.visibility_type, //设置谁可以看：0 公开 1 仅自己可见 2 仅好友可见
            send_type: state.is_Douyin_type, //发布方式：qr_code - 扫码发布，api - 自动发布
            job_type: modelRef.job_type,
            title: state.titleList.map((item) => {
              return {
                title: item.title,
                text: item.text,
                caption: item.caption,
                hashtag_name: item.hashtag_name,
              };
            }),
            // 一个门店一个大数组（关联门店必须，不关联可以不传或者传空，新版页面不传本参数）
            account_ids: state.accountList.map((item) => item.id), //账号ID列表，无关联门店的时候必须传
            video_ids: state.filmVideoList.map((item) => item.id), //视频列表，无关联门店的时候必须传
            anchor_mini: state.anchor_mini, //小程序信息
            store: state.poiList.map((item) => item.id),
          };
          // 定时发布
          if (modelRef.release_type == 2) {
            let timedReleaseDataList = state.timed_release_data.map(
              (dateItem) => {
                return {
                  date: dayjs(dateItem.date).format("YYYY-MM-DD"),
                  time: dateItem.time.map((timeItem) => {
                    return {
                      start_time: dayjs(timeItem.time_period[0]).format(
                        "HH:mm"
                      ),
                      end_time: dayjs(timeItem.time_period[1]).format("HH:mm"),
                    };
                  }),
                };
              }
            );
            params.timed_release_data = timedReleaseDataList; //定时发布时间
            publishFn(params);
          } else if (modelRef.release_type == 1) {
            if (
              state.accountList.length < state.filmVideoList.length &&
              modelRef.video_interval == 0 &&
              modelRef.account_interval == 0 &&
              state.is_Douyin_type !== "qr_code"
            ) {
              Modal.confirm({
                title: "提示",
                icon: createVNode(ExclamationCircleOutlined),
                content: "单个账号视频发布间隔存在风险，建议设置发布间隔",
                okText: "确定",
                cancelText: "取消",
                onOk() {
                  // 立即发布
                  params.video_interval = modelRef.video_interval; //每个视频间隔时间（单位：分钟）
                  params.account_interval = modelRef.account_interval; //每个账号间隔时间（单位：分钟）
                  publishFn(params);
                },
                onCancel() {
                  return;
                },
              });
            } else {
              // 立即发布
              params.video_interval = modelRef.video_interval; //每个视频间隔时间（单位：分钟）
              params.account_interval = modelRef.account_interval; //每个账号间隔时间（单位：分钟）
              publishFn(params);
            }
          }
        })
        .catch((error) => {
          console.log(error);
          // 至少有一个校验失败
          console.log("Validation failed:", error);
        });
    };

    const publishFn = (params) => {
      if (modelRef.anchor_type == 0) {
        // 无挂载
      } else if (modelRef.anchor_type == 1) {
        // 位置挂载
        if (!state.poiList.length && PlatFormValue.value !== "kuaishou") {
          state.borderErrStyle = true;
          return message.warning("请选择挂载位置");
        } else {
          if (PlatFormValue.value == "xiaohongshu") {
            params.store = state.poiList;
          } else {
            params.store = state.poiList.map((item) => item.id);
          }
        }
      } else if (modelRef.anchor_type == 2) {
        // 小程序挂载
        if (!state.anchor_mini.length) {
          state.borderErrStyle = true;
          return message.warning("请选择挂载小程序");
        } else {
          params.anchor_mini = state.anchor_mini;
        }
      } else if (modelRef.anchor_type == 3) {
        if (!state.shop_cart.length) {
          state.borderErrStyle = true;
          return message.warning("请选择挂载商品");
        } else {
          const uniqueArray = state.shop_cart.filter((value, index, self) => {
            return (
              self.findIndex((item) => item.draft_id == value.draft_id) == index
            );
          });
          params.shop_cart = uniqueArray.map((item) => {
            return {
              shop_draft_id: item.draft_id,
              account_id: item.id,
              // 添加标题用于展示
              title: item?.title || "",
            };
          });
        }
      }
      if (PlatFormValue.value == "weixinshipinhao") {
        const {
          download,
          anchor_type,
          anchor_mini,
          visibility_type,
          ...shipinghaoParams
        } = params;
        params = shipinghaoParams;
        let weixin_arr = [];
        state.only_shipingcar.forEach((item) => {
          weixin_arr.push({
            id: item.matchedItem.productId,
            type: 1,
            account_id: item.account_id,
            title: item.matchedItem.title,
            productId: item.matchedItem.productId,
            appid: item.matchedItem.appid,
            imgUrls: item.matchedItem.imgUrls,
          });
        });
        params.shop_component = weixin_arr;
      }
      if (PlatFormValue.value == "kuaishou") {
        const { download, visibility_type, ...kuaishouParams } = params;
        params = kuaishouParams;
        params.kwaiItemIds = state.kuaishou_goods;
      }
      if (PlatFormValue.value == "bilibili") {
        let isArchiveTypeSet = state.accountList?.every(
          (ele) => ele?.archive_type?.id
        );
        let isTagSet = state.accountList?.every((ele) => ele?.tagname);
        if (!state.titleList.length) {
          return message.error("成片标题不能为空");
        }
        if (!isArchiveTypeSet || !isTagSet) {
          const invalidAccounts = state.accountList
            ?.filter((ele) => !ele?.archive_type?.id || !ele.tagname)
            ?.map((ele) => ele.nickname)
            .join(", ");
          return message.error(`请设置账号${invalidAccounts}的分区和标签`);
        } else {
          params.archive_type = state.accountList?.map(
            (ele) => ele.archive_type
          );
          params.tags = state.accountList?.reduce((acc, ele) => {
            acc[ele.id] = ele.tagname; // 假设ele.tagname是数组，例如['生活记录', '娱乐', '记录', '高能']
            return acc;
          }, {});
        }
      }

      if (
        PlatFormValue.value == "douyin" &&
        state.is_douyin_tuangou &&
        state.value_taungou.length > 0
      ) {
        let anchor_spu_Item = [];
        state.checkedItem.forEach((item) => {
          anchor_spu_Item.push({
            id: item.spu_id,
            account_id: Number(state.now_douyin_tuanID),
            type: 13010,
            content: {
              content: {
                spu_id: item.spu_id,
                anchor_title: item?.tuangou_title,
                forbid_edit_anchor: 0,
                is_movie: 0,
                user_type: item?.log_extra?.user_type || "life_daren",
                show_type: Number(item.show_type),
                post_source: 0,
                poi_indirect: {
                  biz_type: 1,
                  biz_id: item.spu_id,
                  biz_ext: "{}",
                  ss_poi_id: item?.poi?.poi_id,
                },
                life_task_order_title: "",
                life_task_name: "",
                life_product_id: item.spu_id,
                life_anchor_secret_audit: "",
                security_audit: 0,
                spu_intranetpage: item.spu_intranetpage,
                brand_switch: {
                  value: Number(item.brand_switch_value),
                },
                intranet_page_type: 0,
              },
            },
            source: 1,
          });
        });
        params.anchor_spu = anchor_spu_Item;
      }

      // 发送
      state.submitLoading = true;
      request
        .post("/work_ai", "/user/filmrelease/create", params)
        .then((res) => {
          if (res?.code && res.code != 1000) {
            state.submitLoading = false;
            return;
          }
          message.success("生成成功");
          router.push({
            path: "ReleaseList",
            query: {
              platform: route.query.platform,
            },
          });
          state.submitLoading = false;
        })
        .catch((error) => {
          state.submitLoading = false;
          console.log(error);
        });
    };

    // 选择挂载内容改变
    const antchor_typeChange = (info) => {
      state.borderErrStyle = false;
      if (PlatFormValue.value == "kuaishou" && info == 1) {
        state.is_kuaishou_goods = true;
      } else {
        state.is_kuaishou_goods = false;
      }

      if (PlatFormValue.value == "douyin" && info == 4) {
        // state.is_douyin_tuangou = true;
        douyin_Tuan();
      } else {
        // state.is_douyin_tuangou = false;
      }
    };


    // 下拉菜单展开
    const dropdownVisibleChange = async() => {
      if (!state.douyintaunList.length) {
        await douyin_Tuan()
      }
    }
    // 获取抖音团购列表
    const douyin_Tuan = async () => {
      if (state.accountList.length === 0) {
        modelRef.anchor_type = 0
        return message.warning("请先选择账号");
      }

      state.value_taungou_loading = true;
      state.is_douyin_tuangou = true;
      let hasValidAccount = false;

      try {
        for (let i = 0; i < state.accountList.length; i++) {
          const item = state.accountList[i];
          try {
            const res = await request.get(
              "/work_ai",
              "/platform/account/withSpu/status",
              {
                id: item.id,
              }
            );
  
            if (res.result.with_spu) {
              state.is_douyin_tuangou = true;
              hasValidAccount = true;
              state.now_douyin_tuanID = item.id;
              const productsRes = await request.get(
                "/work_ai",
                "/platform/account/spu/list",
                {
                  id: state.now_douyin_tuanID,
                  keyword: "",
                  cursor: "0",
                  count: "10",
                }
              );
              state.value_taungou_loading = false;
              state.douyintaunList = productsRes.result.cps_spu_list;
              break;
            }
          } catch (error) {
            console.error(`检查账号 ${item.id} 权限时出错`, error);
            state.value_taungou_loading = false;
          }
        }
  
        if (!hasValidAccount) {
          state.value_taungou_loading = false;
          state.is_douyin_tuangou = false;
          message.warning("所选账号均无挂载团购权限");
        }
      } catch (error) {
        state.value_taungou_loading = false;
      }
    };

    const DouyinTuanRef = ref(null);

    const handleChange = (selectedIds) => {
      if (selectedIds.length == 0) {
        return (state.checkedItem = []);
      }

      if (
        selectedIds.length !== 0 &&
        state.checkedItem.length <= selectedIds.length
      ) {
        state.spu_id = selectedIds[selectedIds.length - 1];
        const nowItem = state.douyintaunList.find(
          (item) => item.spu_id === state.spu_id
        );
        state.edit_page_poi_id = nowItem?.poi?.poi_id;
        const uniqueSpuIds = new Set([
          ...state.checkedItem.map((item) => item.spu_id),
          ...selectedIds,
        ]);

        state.checkedItem = Array.from(uniqueSpuIds)
          .map((spu_id) => {
            return (
              state.douyintaunList.find((item) => item.spu_id === spu_id) ||
              state.checkedItem.find((item) => item.spu_id === spu_id)
            );
          })
          .filter((item) => item !== undefined);
        DouyinTuanRef.value.showDrawer();
      } else {
        state.checkedItem = state.checkedItem.filter((item) =>
          selectedIds.includes(item.spu_id)
        );
      }
    };

    const closeFnitem = () => {
      state.edit_page_poi_id = "";
    };

    const debouncednew_handleSearch = debounce((e) => {
      new_handleSearch(e);
    }, 800);
    const new_handleSearch = async (e) => {
      state.value_taungou_loading = true;
      state.keyword = e;
      try {
        const productsRes = await request.get(
          "/work_ai",
          "/platform/account/spu/list",
          {
            id: state.now_douyin_tuanID,
            keyword: state.keyword,
            cursor: "0",
            count: "10",
          }
        );
        state.douyintaunList = productsRes?.result?.cps_spu_list || [];
      } catch (error) {
        message.warn('获取团购信息失败!')
      } finally {
        state.value_taungou_loading = false;
      }
    };

    const loadingMore = ref(false);
    // 防抖函数工厂
    function debounce(func, wait) {
      let timeout;
      return function (...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), wait);
      };
    }

    // 滚动到底部的处理方法
    const handleScroll = debounce((event) => {
      const { target } = event;
      if (
        !loadingMore.value &&
        target.scrollTop + target.clientHeight >= target.scrollHeight - 50
      ) {
        loadingMore.value = true;
        // loadMore();
      }
    }, 200);

    const loadMore = async () => {
      state.dropdownVisible = true;

      state.value_taungou_loading = true;
      state.cursor = state.cursor + 10;
      const productsRes = await request.get(
        "/work_ai",
        "/platform/account/spu/list",
        {
          id: state.now_douyin_tuanID,
          keyword: state.keyword,
          cursor: state.cursor,
          count: "10",
        }
      );
      productsRes.result.cps_spu_list.forEach((item) => {
        state.douyintaunList.push(item);
      });
      state.value_taungou_loading = false;
      state.dropdownVisible = true;
      loadingMore.value = false;
    };

    const focusFn = () => {
      state.dropdownVisible = true;
    }

    // 删除某项挂载位置
    const deletePoiList = (id) => {
      const index = state.poiList.findIndex((ele) => ele.id == id);
      if (index != -1) {
        state.poiList.splice(index, 1);
      }
    };

    const checkRule = () => {
      window.open(state.ruleUrl);
    };

    const open_newurl = () => {
      window.open("https://open.kwaixiaodian.com/");
    };

    const goguazai = () => {
      window.open(
        "https://support.weixin.qq.com/cgi-bin/mmsupportacctnodeweb-bin/pages/bHwUU86V3aZ43Dzm"
      );
    };

    const checkFn = (info) => {
      state.visiblePOI = true;
      state.platform_account_user_id = info.id;
      state.checked_poi = info?.poi?.id;
    };

    const poiclose = () => {
      state.visiblePOI = false;
      state.checked_poi = "";

      request
        .get("/work_ai", "/org/platformAccount/group/list", {
          source: source_type.value,
          title: "",
          name: "",
        })
        .then((res) => {
          res.whole.forEach((item) => {
            state.accountList.forEach((v2) => {
              if (item.id == v2.id) {
                v2.poi = item.poi;
              }
            });
          });
        });
    };

    const SaveFn = (data) => {
      state.checkedItem = state.checkedItem.map((item) => {
        if (item.spu_id == data.spu_id) {
          return {
            ...item,
            tuangou_title: data.tuangou_title,
            brand_switch_value: data.brand_switch,
            spu_intranetpage: data.spu_intranetpage,
          };
        }
        return item;
      });

      state.checkedItem.forEach((v1) => {
        if (v1.spu_intranetpage == "true") {
          v1.spu_intranetpage = true;
        }

        if (v1.spu_intranetpage == "false") {
          v1.spu_intranetpage = false;
        }
      });
    };


    // 单个账号挂载小程序
    const mountApplet = (item) => {
      console.log(item,'需要挂载的用户');
      
      addmobilDrawer.value.showDrawer({
        itemAccount:item,
        useType:'oneAccount'
      });
    }

    // 更新单个账号的小程序挂载信息
    const updateItemAccount = (params) => {
      const {
        id,
        anchor_mini
      } = params
      const find =  state.accountList.find(ele => ele.id == id)
      console.log(find,'找到的账号信息');
      console.log(id,'账号id');
      console.log(anchor_mini,'挂载的小程序信息');
      
      if (find) {
       !find.bind_info && (find.bind_info = {})
        find.bind_info.anchor_mini = anchor_mini
      }
    }

    const isBack = () => {
      router.push({
        name:'ReleaseList'
      })
    }


    
    const writingTitleVisible=ref(false)
    const titleListNum =ref(0)
    // AI批量写标题
    const AIBatchWritingTitles=()=>{
      titleListNum.value = state.titleList.filter((item)=>item.caption).length
      writingTitleVisible.value = true
      
    }

    const closeChange=()=>{
      writingTitleVisible.value = false
    }

    
    const submitChange=(list)=>{
      state.titleList = list.map((item)=>{
        return {
          hashtag_name:[],
          caption:item.title
        }
      })
      writingTitleVisible.value = false
    }

    const globLoading = ref(false)
    // 上传成片开启 关闭loading
    const loadingUpload = (val) => {
      globLoading.value = val
    }

    // 上传完成, 获取上传之后的成片素材
    const getMediaList = async(video_ids) => {
    const res = await request.post("/work_ai", "/user/shotstack/media/byIds", { video_ids })
      if (res.result.length > 0) {
        const list = res.result.map((item) => ({
          ...item,
          checked: true,
        }))
        state.filmVideoList = [...state.filmVideoList, ...list]
        modelRef.intoPieces = state.filmVideoList;
      }
          }


    
    // 品牌与商业合作披露
    const cooperate = ref(1)
    const checked1 = ref(false)
    const checked2 = ref(false)


const TiktokPolicyDialogRef = ref()

    const toPolicy = () => {
      // 打开新网页
      window.open('https://www.tiktok.com/legal/page/global/bc-policy/zh-Hant')
  
  }

  // 下载客户端
  const downLoadClient = ()=>{
    state.downLoadVisible = true
  }




const informationData = ref({});
const getRequiredInformation = () => {
  request.get("/work_ai", "/digital/human/required/information").then((res) => {
    console.log(res.result, "限制");

    informationData.value = res.result;
  });
};
getRequiredInformation()
  // 获取素材
const getMaterial = () => {
  console.log('获取素材');
  state.extension = informationData.value.video_url.allow_extension
    .map((extension) => "." + extension)
    .join(",");
  state.visible = true;
};


  

    return {
      ...toRefs(state),
      toPolicy,
      TiktokPolicyDialogRef,
      cooperate,
      checked1,
      checked2,
      isElectronEnv,
      job_typeOptions,
      loadingMaskRef,
      getMediaList,
      UploadRef,
      globLoading,
      loadingUpload,
      isBack,
      updateItemAccount,
      mountApplet,
      SaveFn,
      debouncednew_handleSearch,
      handleScroll,
      poiclose,
      checkFn,
      goguazai,
      dropdownVisibleChange,
      validateInfos,
      douyinQrcode,
      resetFields,
      deletePoiList,
      modelRef,
      anchorTypeListComputed,
      antchor_typeChange,
      intoPiecesClick,
      onConfirmChange,
      deleteTitle,
      cancelClick,
      submitClick,
      addAIExpansion,
      onConfirmAIExpansion,
      chooseAccountClick,
      onSuccessChooseAccount,
      getLibraryList,
      closeClick,
      previewImg,
      deleteFilmVideo,
      tagChange,
      searchChange,
      formRef,
      handleRadioChange,
      requirementsClick,
      handleSearchChange,
      handleCloseTag,
      getTitle,
      source_type,
      durationTime,
      addTitledrawer,
      addTitleHandle,
      addTitleSuccess,
      addpoilist,
      addPoiHandle,
      StorePOI_XHS_ref,
      contentTip,
      placeholderTetx,
      addPoiSuccess,
      handMoileChange,
      addMobilHandle,
      addmobilDrawer,
      addMobilSuccess,
      getEditingList,
      titleFormRef,
      addsmallYellowCart,
      addSmallCartHandle,
      addSmallYellowCartSuccess,
      viewSmallCart,
      aiExpansionRef,
      AILoading,
      AIExpansionPercent,
      AIExpanSionCount,
      AIExpanSionTotal,
      changeReleaseTimeType,
      PlatFormValue,
      storePOI,
      onConfirmStorePOI,
      validateTitles,
      TitleTextTipRules,
      TimeSetSuccess,
      setPublishHandle,
      publishFn,
      submitDisabled,
      SetParlabelFn,
      setAllParlabel,
      SetParlabelSuccess,
      SetshipinghaocarFn,
      shipingcarSuccess,
      checkRule,
      open_newurl,
      addPoiListRedBookRef,
      douyin_Tuan,
      handleChange,
      DouyinTuanRef,
      new_handleSearch,
      closeFnitem,
      loadMore,
      focusFn,
      writingTitleVisible,
      AIBatchWritingTitles,
      submitChange,
      closeChange,
      titleListNum,
      downLoadClient,
      getMaterial,//新增
      getRequiredInformation,//新增
    };
  },
});
</script>

<style lang="less">
.ss-select-arrow-loading {
  color: #3261fb !important;
}
.ss-select-selection-item {
  height: 30px !important;
  line-height: 30px !important;
}

:deep(.ss-form-item-control-input){
  display: none !important;
}

.kuaishou_good {
  :deep(.ss-select-dropdown .ss-select-dropdown-placement-bottomLeft) {
    display: none !important;
  }
}

.kuaishou_goods {
  display: none !important;
}

.ss-form-item {
  margin-bottom: 10px !important;
}

.ss-modal-header {
  border-radius: 10px 10px 0 0;
}
</style>

<style lang="less" scoped>
.kuaishou_good {
  :deep(.ss-select-dropdown .ss-select-dropdown-placement-bottomLeft) {
    display: none !important;
  }
}
:deep(.ss-select-multiple .ss-select-selection-item) {
  background: #e3f5ff !important;
  color: #4778d9 !important;
  border-color: #8acdfd !important;
}

:deep(.ss-spin-nested-loading){
  width: 100%;
}


.tiktok_bottom_text_content{
  margin: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  .tiktok_bottom_text{
    color: var(--ss-primary-color);
    cursor: pointer;
  }
}


.box {
  padding-bottom: 50px;

  // 头部样式
  .router-name {
    font-size: 16px;
    font-weight: 600;
    color: #101011;
    display: flex;
    align-items: center;

    .back {
      color: #000;
      border: 1px solid #e0e0e6;
      margin-right: 10px;
      border-radius: 5px;
    }
  }

  // 主体部分
  .content {
    margin-top: 20px;
    display: flex;
    width: 100%;
    position: relative;

    // 左侧区域
    .context_lf {
      width: 60%;
      margin-right: 20px;
      min-width: 600px;

      .lf_top {
        width: 100%;
        border: 1px solid #e0e0e6;
        border-radius: 5px;
        background-color: #fff;
        padding: 20px;

        .movieslist {
          display: flex;
          flex-wrap: wrap;
          grid-template-columns: repeat(5, 1fr); //平分5等份
          grid-gap: 16px;
          max-height: 232px;
          overflow: auto;

          &::-webkit-scrollbar {
            width: 6px;
          }

          // 添加成片
          .movies_add {
            width: 100px;
            border: 1px solid #e0e0e6;
            border-radius: 5px;
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: rgb(236, 236, 236);
            cursor: pointer;

                // 添加素材的卡片样式
    .upload_box {
      width: 100%;
      height: 100%;
      border-radius: 5px;
      position: relative;
      margin: 0 5px;

      &:hover {
        & .upload_img_mask {
          opacity: 1;
        }

      }

      .upload_img_mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;        
        background: #f1f3f5;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        opacity: 0;

        .upload_img-local,
        .upload_img-origin {
          align-items: center;
          justify-content: center;
          display: flex;
          height: 68%;
          font-size: 12px;
          padding-bottom: 11px;

          &:hover {
            color: #3261fb;
          }
        }

        .line {
          height: 1px;
          width: 80%;
          background: #ececec;
        }

        & span {
          cursor: pointer;
        }
      }

      // 鼠标触摸之前的描述文本
      .upload_desc {
        background: #ececec;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    }

            .select_material_box{

              &:hover{
                .select_material_box_content_hover {
                  opacity: 1;
                  z-index: 1;
                }

              .select_material_box_content {
                visibility: hidden;
                opacity: 0;
                z-index: -99;
              }
              }

              .select_material_box_content {
                position: relative;
                opacity: 1;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              }

              .select_material_box_content_hover {
                position: relative;
                z-index: -99;
                height: 100%;
                opacity: 0;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
              }

            }
          }

          .movies_item {
            width: 100px;
            border: 1px solid #e0e0e6;
            border-radius: 5px;
            height: 100px;
            background-color: rgb(236, 236, 236);
            position: relative;

            // 持续时长
            .movies_duration {
              position: absolute;
              bottom: 2px;
              left: 2px;
              width: 40px;
              border-radius: 5px;
              color: #fff;
              // z-index: 999;
              background: #494949;
              text-align: center;
              font-size: 10px;
            }

            // 播放按钮
            .movies_itemmask {
              position: absolute;
              width: 100px;
              height: 100px;
              top: 0;
              left: 0;
              visibility: hidden;
              background-color: rgba(0, 0, 0, 0.5);

              .play_icon {
                margin-top: 50%;
                margin-left: 50%;
                transform: translate(-50%, -50%);

                &:hover {
                  color: var(--ss-primary-color) !important;
                }
              }

              .movies_closebtn {
                margin-top: 100%;
                margin-left: 85px;
                color: #fff;
                // &:hover {
                //   color: var(--ss-primary-color);
                // }
              }
            }

            &:hover .movies_itemmask {
              visibility: visible;
            }
          }
        }
      }

      .lf_bottom {
        flex: 1;
        height: 100%;
        width: 100%;
        border: 1px solid #e0e0e6;
        border-radius: 5px;
        background-color: #fff;
        padding: 20px;
        margin-top: 10px;
        .set_all {
          margin: 10px 0;
        }
        // 账号列表
        .account_list {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          max-height: 360px;
          overflow: auto;
          grid-template-columns: repeat(4, 1fr);
          grid-gap: 16px;

          &::-webkit-scrollbar {
            width: 6px;
          }

          .account_add {
            width: 220px;
            height: 90px;
            border: 1px dashed #e0e0e6;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            background-color: rgb(236, 236, 236);
            cursor: pointer;
          }

          .account_item {
            cursor: pointer;
            width: 220px;
            height: 90px;
            border: 1px solid #e0e0e6;
            background-color: rgb(236, 236, 236);
            border-radius: 5px;
            padding: 0 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .account_item_info {
              display: flex;
              align-items: center;
              .avatar {
                width: 40px;
                height: 40px;
                margin-right: 10px;
                border-radius: 50%;
                position: relative;
              }

              .user_info {
                flex: 1;
                height: 40px;
                display: flex;
                flex-direction: column;
                .nickName {
                  font-size: 15px;
                }

                .publish_num {
                  font-size: 12px;
                }
              }
            }

            .action_btn {
              display: flex;
              align-items: center;
              justify-content: flex-end;
              .set_btn {
                font-size: 10px;
                margin-right: 5px;
                color: var(--ss-primary-color);
                font-weight: 600;
                cursor: pointer;
              }

              .set_btn_dis {
                font-size: 10px;
                margin-right: 5px;
                color: #a4a4a4;
                font-weight: 600;
                cursor: not-allowed;
              }
              .del_btn {
                &:hover {
                  color: var(--ss-primary-color);
                }
              }
            }

            .status_tag {
              font-size: 12px;
              font-weight: 600;
              text-align: right;
            }
          }
        }
      }
    }

    // 右侧区域
    .context_rg {
      min-width: 600px;
      flex: 1;
      padding: 20px;
      padding-bottom: 50px;
      border: 1px solid #e0e0e6;
      border-radius: 5px;
      background-color: #fff;

      .title_tip {
        display: flex;
        justify-content: space-between;
        // height: 30px;
        cursor: pointer;

        :deep(.ss-btn[disabled]) {
          display: flex !important;
        }
      }

      .title_list_one {
        border: 1px solid #e0e0e6;
        border-radius: 5px;
        background-color: #fff;
      }

      .title_list_more {
        width: 100%;
        max-height: 240px;
        overflow-y: auto;

        &::-webkit-scrollbar {
          width: 8px;
          /* 滚动条的宽度 */
          height: 10px;
          /* 滚动条的高度，垂直滚动条可能用得上 */
          display: none;
        }

        &::-webkit-scrollbar-thumb {
          background: #888;
          /* 滑块的背景颜色 */
          border-radius: 10px;
          /* 滑块的圆角 */
        }

        .title-item {
          width: 100%;
          border: 1px solid #e0e0e6;
          margin-top: 10px;
          border-radius: 5px;
          cursor: pointer;
          .item-text {
            padding: 10px;
            white-space: nowrap;
            /* 防止文字换行 */
            overflow: hidden;
            /* 隐藏溢出的内容 */
            text-overflow: ellipsis;
          }

          .item-caption {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 35px;
            padding: 10px;

            .caption {
              flex: 1;
              white-space: nowrap;
              /* 防止文字换行 */
              overflow: hidden;
              /* 隐藏溢出的内容 */
              text-overflow: ellipsis;
              /* 使用省略号表示溢出的文本 */
            }

            .operation {
              visibility: hidden;
              margin-left: 5px;
              cursor: pointer;
              .edit_btn,
              .delete_btn {
                &:hover {
                  color: var(--ss-primary-color);
                }
              }
            }
          }

          .hashtag_name {
            padding: 5px;
          }
          &:hover .operation {
            visibility: visible;
          }
        }
      }
    }

    .footer-submit {
      min-width: 600px;
      position: fixed;
      height: 50px;
      line-height: 50px;
      bottom: 20px;
      right: 20px;
      text-align: right;
    }
  }
}

:deep(textarea) {
  &::-webkit-scrollbar {
    width: 3px;
  }
}

// 去除校验失败边框颜色
:deep(
    .ss-form-item-has-error
      .ss-select:not(.ss-select-disabled):not(.ss-select-customize-input)
      .ss-select-selector
  ) {
  border-color: #fff !important;
}

:deep(.ss-form-item-explain-error) {
  padding-left: 10px !important;
}

.textarea {
  &::-webkit-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-track {
    width: 5px;
    background-color: transparent;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(193, 193, 193, 0.5);
    background-clip: padding-box;
    min-height: 28px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
}

.blueFN {
  color: #31981e;
}
.blueFN:hover {
  color: #3261fb;
}

.taungou_box {
  display: flex;
  padding: 10px;
  .left {
    margin-right: 10px;
    .left_img {
      width: 80px;
      height: 80px;
      border-radius: 4px;
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .one {
      font-weight: 600;
    }
    .two {
      color: #939393;
    }
    .three {
      color: #fb1d4c;
      display: flex;
      align-items: center;

      .three_right {
        padding: 2px 4px;
        margin-left: 10px;
        background-color: #fdeaeb;
      }
    }
  }
}
</style>
